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元素及其包含的子元素移除。例如，输出数据对象中的属性 a 和 b 的值，并根据比较两个属性的值，判断是否输出比较结果。代码如下：
<div id="box">
<p>a的值是{
{a}}p>
<p>b的值是{
{b}}p>
<p v-if="a" >a小于bp>
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" >a小于bp>
<p v-else>a大于bp>
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前端框架：计算属性与监听属性，希望大家多多支持和关注。