v-if条件语句和v-for循环语句简明教程

 

本章节结合例子来简单分析vue中v-if和v-show条件语句和v-for循环语句的使用。

一.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">
		
</标签名>

v-for 指令根据一组数组的选项列表进行渲染。 v-for 指令需要以 item in items 形式的特殊语法, items 是源数据数组并且 item 是数组元素迭代的别名。

图例:

Vue.js的循环语句相对简单,而且很容易上手。另外,既然循环数据源是已知的,那在vue.js中,拥有对父作用域属性的完全访问权限。所以, v-for 还支持一个可选的第二个参数为当前项的索引。 例如:

以上是有关vue.js中较为重要和实用的v-if条件判断语句和v-for循环语句,本文章中使用了例子和效果图加以说明解析,相信你也很快就能熟练地掌握和运用。

图例:

更多vue组件学习: 深入了解vue组件——从注册到使用 vue过滤器filters结合实例解析 VUE框架属性方法图文全解

本文为博主原创文章,知识共享,开源精神,转载注明出处。