3.Vue.js前端框架:条件判断与列表渲染
3.1 条件判断在视图中,经常需要控制某些DOM元素的显示或隐藏。Vue.js提供了多个指令来实现条件的判断,包括 v-if、v-else、v-else-if、v-show指令。下面分别进行介绍。3.1.1 v-if指令v-if 指令可以根据表达式的值来判断是否输出DOM元素及其包含的子元素。如果表达式的值为 true,就输出DOM元素及其包含的子元素;否则,就将DOM元素及其包含的子元素移除。例
·
3.1 条件判断
- 在视图中,经常需要控制某些DOM元素的显示或隐藏。Vue.js提供了多个指令来实现条件的判断,包括 v-if、v-else、v-else-if、v-show指令。下面分别进行介绍。
3.1.1 v-if指令
- v-if 指令可以根据表达式的值来判断是否输出DOM元素及其包含的子元素。如果表达式的值为 true,就输出DOM元素及其包含的子元素;否则,就将DOM元素及其包含的子元素移除。例如,输出数据对象中的属性 a 和 b 的值,并根据比较两个属性的值,判断是否输出比较结果。代码如下:
<div id="box">
<p>a的值是{{a}}</p>
<p>b的值是{{b}}</p>
<p v-if="a<b">a小于b</p>
</div>
<script type="text/javascript">
var demo = new Vue({
el : '#box',
data :{
a :100,
b :200
}
});
</script>
- 运行结果如下图所示。
3.1.2 在 template 元素中使用 v-if
- v-if 是一个指令,必须将它添加到一个元素上,根据表达式的结果判断是否输出该元素。如果需要对一组元素进行判断,需要使用 template 元素作为包装元素,并在该元素上使用 v-if ,最后的渲染结果中不会包含 template 元素。例如,根据表达式的结果判断是否输出一组单选按钮。代码如下:
<div id="box">
<template v-if="show">
<input type="radio" value="A">A
<input type="radio" value="B">B
<input type="radio" value="C">C
<input type="radio" value="D">D
</template>
</div>
<script type="text/javascript">
var demo = new Vue({
el : '#box',
data :{
show : true
}
});
</script>
- 运行结果如下图所示,如果数据对象中的 show 为 true,显示 div 模块下的结果,否则没有输出结果。
3.1.3 v-else指令
- v-else 指令的作用相当于 JavaScript 中的 else 语句部分。可以将 v-else 指令配合 v-if 指令一起使用。例如,输出数据对象中的属性 a 和 b 的值,并根据比较两个属性的值,输出比较结果。代码如下:
<div id="box">
<p>a的值是{{a}}</p>
<p>b的值是{{b}}</p>
<p v-if="a<b">a小于b</p>
<p v-else>a大于b</p>
</div>
<script type="text/javascript">
var demo = new Vue({
el : '#box',
data :{
a :100,
b :200
}
});
</script>
- 运行结果如下图所示。
3.1.4 v-else-if 指令
- v-else-if 指令的作用相当于 JavaScript 中的 else if 语句的部分。应用该指令可以进行更多的条件判断,不同的条件对应不同的输出结果。例如,将某学校的学生成绩转换为不同等级,示例代码如下:
<div id="box">
<div v-if="score>=90 && score<=100">优秀</div>
<div v-else-if="score>=80 && score<90">良好</div>
<div v-else-if="score>=70 && score<80">中等</div>
<div v-else-if="score>=60 && score<70">及格</div>
<div v-else>不及格</div>
</div>
<script type="text/javascript">
var demo = new Vue({
el : '#box',
data :{
score : 90
}
});
</script>
- 注意:v-else 指令必须紧跟在 v-if 或 v-else-if 指令的后面,否则 v-else 将不起作用。同样,v-else-if 指令也必须紧跟在 v-if 指令或 v-else-if 指令的后面。代码运行图片如下所示。
3.1.5 v-show 指令
- v-show 指令是根据表达式的值来判断是否显示或隐藏DOM元素。当表达式的值为 true 时,元素将被显示,当表达式的值为 false 时,元素将被隐藏,此时为元素添加了一个内联样式 style=“display:one”。与 v-if 指令不同,使用 v-show 指令的元素,无论表达式的值为 true 还是 false,该元素都始终会被渲染并保留在 DOM 中。绑定值的改变只是简单地切换元素的CSS属性 display。v-show 指令不支持 template 元素,也不支持 v-else指令。例如,通过单击按钮切换图片的显示和隐藏。代码示例如下:
<div id="box">
<input type="button" : value="bText" v-on:click="toggle">
<div v-show="show">
<img src="face.png">
</div>
</div>
<script type="text/javascript">
var demo = new Vue({
el : '#box',
data :{
bText : '隐藏图片',
show : true
},
methods: {
toggle : function(){
//切换按钮文字
this.bText == '隐藏图片' ? this.bText ='显示图片' : this.bText = '隐藏图片';
this.show = !this.show;//修改属性值
}
}
});
</script>
3.1.6 v-if 和 v-show 的比较
- v-if 和 v-show 实现的功能类似,但两者也有着本质的区别。下面列出 v-if 和 v-show 这连个指令的主要不同点。
(1)在进行 v-if 切换时,因为 v-if 中的模板可能包括数据绑定或子组件,所以 Vue.js会有一个局部编译/卸载的过程。而在进行 v-show切换时,仅发生了样式的变化。因此从切换的角度考虑,v-show 消耗的性能要比 v-if 小。
(2)v-if 是惰性的,如果在初始条件为 false 时,v-if 本身什么都不会做,而使用 v-show 时,不过初始条件是真是假,DOM 元素总是会被渲染。因此从初始渲染的角度考虑,v-if 消耗的性能要比 v-show小。 - 总的来说,v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此,如果需要频繁地切换,则使用 v-show 比较好;如果在运行时条件很少改变,则使用 v-if 比较好。
3.2 列表渲染
- Vue.js 提供了列表渲染的功能,即将数组或对象中的数据循环渲染到 DOM 中。在 Vue.js 中,列表渲染使用的是 v-for 指令,其效果类似于 JavaScript 中的遍历。
3.2.1 应用 v-for 指令遍历数组
- v-for 指令将根据接收数组中的数据重复渲染 DOM 元素。该指令需要使用 item in items 形式的语法,其中,items 为数据对象中的数组名称,item 为数组元素的别名,通过别名可以获取当前数组遍历的每个元素。例如,应用 v-for 指令输出数组中存储的电视剧名称。代码如下:
<div id="box">
<ul>
<li v-for="item in items">{{item.TV_play}}</li>
</ul>
</div>
<script type="text/javascript">
var demo = new Vue({
el : '#box',
data :{
items : [ //定义电视剧名称
{ TV_play :'琉璃美人煞'},
{ TV_play :'祝卿好'},
{ TV_play :'梦醒长安'}
]
}
});
</script>
- 运行结果如下图所示。
- 在应用 v-for 指令遍历数组时,还可以指定一个参数作为当前数组元素的索引,语法格式为:(item,index) in items。其中,items 为数组名称,item 为数组元素的别名,index 为数组元素的索引。例如,应用 v-for 指令输出数组中存储的电视剧名称和相应的索引。代码如下:
<div id="box">
<ul>
<li v-for="(item,index) in items">{{index}}-{{item.TV_play}}</li>
</ul>
</div>
<script type="text/javascript">
var demo = new Vue({
el : '#box',
data :{
items : [ //定义电视剧名称
{ TV_play :'琉璃美人煞'},
{ TV_play :'祝卿好'},
{ TV_play :'梦醒长安'}
]
}
});
</script>
- 运行结果如下图所示。
3.2.2 在 template 元素中使用 v-for
- 与 v-if 指令类似,如果需要对一组元素进行循环,可以使用 template 元素作为包装元素,并在该元素上使用 v-for。例如,在 template 元素中使用 v-for 指令,实现输出网站导航菜单的功能。代码如下:
<div id="box">
<ul>
<template v-for="menu in menulist">
<li class="item">{{menu}}</li>
<li class="separator"></li>
</template>
</ul>
</div>
<script type="text/javascript">
var demo = new Vue({
el : '#box',
data :{
menulist : ['首页','闪购']//定义导航菜单组件
}
});
</script>
- 某些页面样式资源没有导入,样式的格式有点小问题,不过代码是正确的,主要以展示为主。上述代码运行结果图为:
3.2.3 数组更新检测
- Vue.js中包含了一些检测数组变化的变异方法,调用这些方法可以改变原始数组,并出发视图更新。下面简单的介绍一下这些编译方法。
(1)push():向数组的末尾添加一个或多个元素。
(2)pop():将数组中的最后一个元素从数组中删除。
(3)shift():将数组中的第一个元素从数组中删除。
(4)unshift():向数组的开头添加一个或多个元素。
(5)splice():添加或删除数组中的元素。
(6)sort():对数组中的元素进行排序。
(7)reverse():颠倒数组中元素的顺序。 - 例如应用变异方法push()向数组中添加一个元素,代码如下:
<div id="box">
<ul>
<li v-for="item in items">{{item.name}}</li>
</ul>
</div>
<script type="text/javascript">
var demo = new Vue({
el : '#box',
data :{
items :[ //定义人物名称
{ name : '张三'},
{ name : '李四'},
{ name : '王二'}
]
}
});
demo.items.push({ name : '麻子'});//向数组末尾添加数组元素
</script>
- 运行结果如下图所示。
- 除了变异方法外,Vue.js 还包含了几个非变异方法,例如:filter()、concat() 和 slice() 方法。调用非变异方法不会改变原始数组,而是返回一个新的数组。当使用非变异方法时,可以用新的数组替换原来的数组。例如,应用 slice() 方法获取数组中第 2 个元素后的所有元素,代码如下:
<div id="box">
<ul>
<li v-for="item in items">{{item.name}}</li>
</ul>
</div>
<script type="text/javascript">
var demo = new Vue({
el : '#box',
data :{
items :[ //定义人物名称
{ name : '张三'},
{ name : '李四'},
{ name : '王二'}
]
}
});
demo.items =demo.items.slice(1);//获取数组中第2个元素后的所有元素
</script>
- 运行结果如下图所示。
3.2.4 应用 v-for 指令遍历对象
- 应用 v-for 指令除了可以遍历数组之外,还可以遍历对象。遍历对象使用 value in object 形式的语法,其中,object 为对象名称,value为对象属性值的别名。例如,应用 v-for 指令输出对象中存储的人物信息。代码如下:
<div id="box">
<ul>
<li v-for="value in object">{{value}}</li>
</ul>
</div>
<script type="text/javascript">
var demo = new Vue({
el : '#box',
data :{
object :{ //定义人物信息对象
name : '晓茗',
sex : '女',
age : 29,
address : '上海'
}
}
});
</script>
- 运行结果如下图所示。
- 在应用 v-for 指令遍历对象时,还可以使用第 2 个参数为对象属性名(键名)提供一个别名,语法格式为:(value,key) in object 。其中,object 为对象名称,value 为对象属性值的别名,key 为对象属性名的别名。例如,应用 v-for 指令输出对象中的属性名和属性值。代码如下:
<div id="box">
<ul>
<li v-for="(value,key) in object">{{key}}:{{value}}</li>
</ul>
</div>
<script type="text/javascript">
var demo = new Vue({
el : '#box',
data :{
object :{ //定义人物信息对象
name : '晓茗',
sex : '女',
age : 29,
address : '上海'
}
}
});
</script>
- 运行结果图片如下所示。
3.2.5 向对象中添加属性
- 在已经创建的实例对象中,
使用全局方法 Vue.set(object,key,value),
或者实例方法 vm.$set(object,key,value),可以向对象中添加响应式属性,同时触发视图更新。例如,应用全局方法 Vue.set() 向对象中添加一个新的属性。代码如下:
<div id="box">
<ul>
<li v-for="(value,key) in object">{{key}}:{{value}}</li>
</ul>
</div>
<script type="text/javascript">
var demo = new Vue({
el : '#box',
data :{
object :{ //定义人物信息对象
name : '晓茗',
sex : '女',
age : 29,
address : '上海'
}
}
});
Vue.set(demo.object,'postion','演员');//利用全局方法向对象中添加属性
</script>
- 运行结果如下图所示。
- 如果需要向对象中添加多个响应式属性,可以使用 Object.assign() 方法。在使用该方法时,需要将源对象的属性和新添加的属性合并为一个新的对象。例如,使用 Object.assign() 方法向对象中添加两个新的属性。代码如下:
<div id="box">
<ul>
<li v-for="(value,key) in object">{{key}}:{{value}}</li>
</ul>
</div>
<script type="text/javascript">
var demo = new Vue({
el : '#box',
data :{
object :{ //定义人物信息对象
name : '晓茗',
sex : '女',
age : 29,
address : '上海'
}
}
});
demo.object =Object.assign({},demo.object,{ //向对象中添加两个新的属性
tel : '18803830913',
interest : '喝奶茶',
});
</script>
- 运行结果如下图所示。
3.2.6 应用 v-for 指令遍历整数
- v-for 指令也可以遍历整数,接收的整数即为循环次数,根据循环次数将模板重复整数次。例如,某单位正式员工的工作每增加一年,工资增长30,输出一个工作5年的员工每一年的工龄工资增加情况,代码如下:
<div id="example">
<div v-for="n in 5">员工第{{n}}年工龄,工资为:{{n*salary}}万元</div>
</div>
<script type="text/javascript">
var demo = new Vue({
el : '#example',
data :{
salary : 10
}
})
</script>
- 运行结果如下图所示。
- 使用 v-for 指令输出九九乘法表。代码如下:
<div id="demo">
<div v-for="n in 9">
<span v-for="m in n">
{{m}}*{{n}}={{m*n}}
</span>
</div>
</div>
<script type="text/javascript">
var demo = new Vue({
el : '#demo'
});
</script>
- 运行结果图片如下。
备注:后期继续跟进Vue.js前端框架:计算属性与监听属性,希望大家多多支持和关注。
更多推荐
已为社区贡献3条内容
所有评论(0)