Vue.js框架快速入门简明教程（二）：条件语句、循环语句和实例分析

一. 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教程和知识请拽下面连接：

10道Vue.js精简经典面试题及答案——面试必备