一. v-if和v-show条件语句
1、V-if条件判断语句
V-if指令是vue.js中的条件语句指令，可以在任何元素和emplate 中使用，用于判断条件是否成立，返回值是布尔类型( bool)false和true。和javascript一样中的if条件判断语句一样，v-if 也是惰性的，如果在初始渲染时条件为假，则什么也不做，直到条件第一次变为真时，才会开始渲染条件块，所以v-if是vue.js中的条件渲染。
<div id="app">
<p v-if="Math.random() > 0.5">随机数＞0.5</p>
<p v-else>随机数<=0.5</p>
</div>
在javascript的条件判断语句中有if…else…、if…else if…else if… ，在vue.js中也同样有v-if…v-else-if…v-eles-if…可以链式的多次使用，然而在vue.js中是作用于html代码块。
<div id="app">
<p v-if="Math.random()===1">随机数=1</p>
<p v-else-if="Math.random()===2">随机数=2</p>
<p v-else-if="Math.random()===3">随机数=3</p>
<p v-else>随机数>3</p>
</div>
2、v-show
V-show是根据条件来判断是否展示元素，只是简单地基于 CSS 进行切换是否隐藏或者显示，而在vue.js的底层，所有被作用于v-show的元素都会被渲染。
<div id="app">
<p v-show="ok">vue.js中的v-show实例解释</p>
</div>
</body>
<script>
new Vue({
el: '#app',
data:{
ok:false
}
})
</script>
这里要区分v-if和v-show的渲染特点，v-if 会确保条件块内的事件监听器和子组件适当地被销毁和重建。而v-show则是全部渲染后再通过改变css的dispaly属性来控制是否显示。由此可以知道，一般情况下，v-if会更加节省资源，开销低，而v-show全部渲染开销高，比较耗费资源。
二. v-for循环语句
v-for的基本语法是：
<标签名 v-for="item in items">
{{item.text}}
</标签名>
v-for 指令根据一组数组的选项列表进行渲染。 v-for 指令需要以 item in items 形式的特殊语法， items 是源数据数组并且 item 是数组元素迭代的别名。
例如：
Vue.js的循环语句相对简单，而且很容易上手。另外，既然循环数据源是已知的，那在vue.js中，拥有对父作用域属性的完全访问权限。所以， v-for 还支持一个可选的第二个参数为当前项的索引。
例如：
以上是有关vue.js中较为重要和实用的v-if条件判断语句和v-for循环语句，本文章中使用了例子和效果图加以说明解析，相信你也很快就能熟练地掌握和运用。
更多vue.js教程和知识请拽下面连接：
