第三章条件判断与列表渲染

最新推荐文章于 2026-07-17 09:27:53 发布

原创最新推荐文章于 2026-07-17 09:27:53 发布 · 2.2k 阅读

19 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Web前端高级技术（Vue.js)笔记

本文详细讲解了Vue.js中的条件判断与列表渲染，包括v-if、v-else、v-else-if、v-show指令的使用，以及v-for指令在遍历数组、对象和整数时的应用，同时对比了v-if与v-show的性能和适用场景。

第三章条件判断与列表渲染

一、条件判断

1、v-if指令

v-if是一个指令，必须将它添加到一个元素上，根据表达式的结果判断是否输出该元素。

实例：输出数据对象中属性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>

如果需要对一元素进行判断，需要使用<template>元素作为包装元素，并在该元素上使用v-if，最后的渲染结果中不会包含<template>元素

实例：根据表达式的结果判断是否输出一组单选按钮。

<div id="example">
    <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:'#example',
        data:{
            show: true
        }
    });
</script>

2、v-else指令

v-else指令的作用相当于JavaScript中的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 : 200,
            b : 100
        }
    });
</script>

实例：应用v-if指令和v-else指令判断2019年2月份的天数。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>判断2019年2月份的天数</title>
<script src="../JS/vue.js"></script>
</head>
<body>
<div id="box">
	<p v-if="(year%4==0 && year%100!=0) || year%400==0">
		{{show(29)}}
	</p>
	<p v-else>
		{{show(28)}}
	</p>
</div>
<script type="text/javascript">
    var demo = new Vue({
        el : '#box',
        data : {
			year : 2019
		},
		methods : {
			show : function(days){
				alert(this.year+'年2月份有'+days+'天');//弹出对话框
			}
		}
    });
</script>
</body>
</html>

3、v-else-if指令

v-else-if指令的作用相当于JavaScript中的else if语句部分。

注意：

v-else指令必须紧跟在v-if指令或v-else-if指令的后面，否则v-else指令将不起作用。
v-else-if指令也必须紧跟在v-if或者v-else-if指令的后面。

实例：

将某学校的学生成绩转化为不同等级，划分标准如下：

①“优秀”，大于等于90分；

②“良好”，大于等于75分；

③“及格”，大于等于60分；

④“不及格”，小于60分。

假设刘星的考试成绩是85分，输出该成绩对应的等级。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>判断考试成绩对应的等级</title>
<script src="../JS/vue.js"></script>
</head>
<body>
<div id="box">
	<div v-if="score>=90">
		刘星的考试成绩优秀
	</div>
	<div v-else-if="score>=75">
		刘星的考试成绩良好
	</div>
	<div v-else-if="score>=60">
		刘星的考试成绩及格
	</div>
	<div v-else>
		刘星的考试成绩不及格
	</div>
</div>
<script type="text/javascript">
    var demo = new Vue({
        el : '#box',
        data : {
			score : 85
		}
    });
</script>
</body>
</html>

4、v-show指令

v-show指令是根据表达式的值来判断是否显示或隐藏DOM元素。当表达式的值为true时，元素将被显示；当表达式的值为false时，元素被隐藏，此时为元素添加一个内联样式style=“display:none”。

和v-if指令不同，使用v-show指令的元素，无论表达式的值为true还是false，该元素都始终会呗渲染并保留在DOM中。绑定值得改变只是简单地切换元素的CSS属性display。

注意：v-show指令不支持<template>元素，也不支持v-else指令。

实例：通过单机按钮切换图片的显示和隐藏。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>切换图片的显示和隐藏</title>
<script src="../JS/vue.js"></script>
</head>
<body>
<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>
</body>
</html>

5、v-if和v-show的比较

从切换的角度：

V-if模板可能包括数据绑定和子组件，所以vue.js会有一个局部编译和卸载的过程。V-show切换时，仅发生样式变化。
v-show性能要优于v-if。

从初始渲染的角度：

v-if如果初始条件是false时，v-if本身什么都不会做，而v-show不管初始条件是真是假，DOM元素总会渲染。
v-if性能要优于v-show。

需要频繁切换时v-show较好，运行条件很少改变则使用v-if较好。

二、列表渲染

1、应用v-for指令遍历数组

v-for指令将根据接收数组中的数据重复渲染DOM元素。该指令需要使用item in items形式的语法，其中，items为数据对象中的数组名称，item为数组元素的别名，通过别名可以获取当前数组遍历的每个元素。

实例：应用v-for指令输出数组中存储的人物名称。

<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 : '王五'}
            ]
        }
    });
</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.name}}
        </li>
    </ul>
</div>
<script type="text/javascript">
    var demo = new Vue({
        el : '#box',
        data : {
            items : [
                { name : '张三'},
                { name : '李四'},
                { name : '王五'}
            ]
        }
    });
</script>

实例：应用v-for指令输出数组中的省份、省会以及旅游景点信息。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>输出省份、省会以及旅游景点</title>
<style>
body{
font-family:微软雅黑}
.title{
background: #f6f6f6;
font-size:18px;
}
.title,.content{
width:510px;
height:36px;
line-height:36px;
border: 1px solid #dddddd;}
.title div{
text-align:center;
float:left}
.title .col-1,.content .col-1{
width:80px;}
.title .col-2,.content .col-2{
width:270px;}
.content{
clear:both}
.content div{
text-align:center;
float:left}
</style>
<script src="../JS/vue.js"></script>
</head>
<body>
<div id="box">
	<div class="title">
		<div class="col-1">序号</div>
		<div class="col-1">省份</div>
		<div class="col-1">省会</div>
		<div class="col-2">旅游景点</div>
	</div>
	<div class="content" v-for="(tourist,index) in touristlist">
		<div class="col-1">{{index + 1}}</div>
		<div class="col-1">{{tourist.province}}</div>
		<div class="col-1">{{tourist.city}}</div>
		<div class="col-2">{{tourist.spot}}</div>
	</div>
</div>
<script type="text/javascript">
    var demo = new Vue({
        el : '#box',
        data : {
			touristlist : [{ //定义旅游信息列表
				province : '黑龙江省', 
				city : '哈尔滨市', 
				spot : '太阳岛 圣索菲亚教堂 伏尔加庄园' 
			},{ 
				province : '吉林省', 
				city : '长春市', 
				spot : '净月潭 长影世纪城 伪满皇宫' 
			},{ 
				province : '辽宁省', 
				city : '沈阳市', 
				spot : '沈阳故宫 沈阳北陵 张氏帅府' 
			}]
		}
    });
</script>
</body>
</html>

2、在`<template>`元素中使用v-for

与v-if指令类似，如果需要一对元素进行循环，可以使用<template>元素作为包装元素，并在该元素上使用v-for。

实例：

在<template>元素中使用v-for指令，实现输出网站导航菜单的功能。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>输出导航菜单</title>
<style>
ul{
list-style:none;
height:30px;
line-height:30px;}
li{
float:left;
margin:auto 30px;}
.item{
font-family:微软雅黑;
font-size:16px;
font-weight:600;
}
.separator:not(:last-child){
width:1px;
height:16px;
background:#999999; margin:7px auto;
}
</style>
<script src="../JS/vue.js"></script>
</head>
<body>
<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>
</body>
</html>

3、数组更新检测

变异方法

Vue.js中包含了一些检测数组变化的变异方法，调用这些方法可以改变原始数组，并触发视图更新。这些变异方法及其说明如表所示：

方法名	说明
push()	向数组末尾添加一个或多个元素
pop()	将数组中的最后一个元素从数组中删除
shift()	将数组中第一个元素从数组中删除
unshift()	向数组的开头添加一个或多个元素
splice()	添加或删除数组中的元素
sort()	对数组中元素进行排序
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>

实例：将2018年内地电影票房排行榜前十名的影片名称和票房定义在数组中，对数组按影片票房进行降序排序，将排序后的影片排名、影片名称和票房输出在页面中。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2018内地电影票房排行</title>
<style>
body{
font-family:微软雅黑;
font-size:14px}
.title{
background: #f6f6f6;
font-size:18px;
}
.content:nth-child(odd){
background: #f6f6f6;}
.title,.content{
width:430px;
height:36px;
line-height:36px;
border: 1px solid #dddddd;}
.title,.content:not(:last-child){
border-bottom:none;}
.title div{
text-align:center;
float:left}
.title .col-1,.content .col-1{
width:80px;}
.title .col-2,.content .col-2{
width:260px;}
.content{
clear:both}
.content div{
text-align:center;
float:left}
</style>
<script src="../JS/vue.js"></script>
</head>
<body>
<div id="example">
	<div class="title">
		<div class="col-1">排名</div>
		<div class="col-2">电影名称</div>
		<div class="col-1">票房</div>
	</div>
	<div class="content" v-for="(value,index) in movie">
		<div class="col-1">{{index + 1}}</div>
		<div class="col-2">{{value.name}}</div>
		<div class="col-1">{{value.boxoffice}}亿</div>
	</div>
</div>
<script type="text/javascript">
var exam = new Vue({
	el:'#example',
	data:{
		movie : [//定义影片信息数组
			{ name : '西虹市首富',boxoffice : 25.4 },
			{ name : '毒液：致命守护者',boxoffice : 18.7 },
			{ name : '我不是药神',boxoffice : 30.9 },
			{ name : '红海行动',boxoffice : 36.5 },
			{ name : '侏罗纪世界2',boxoffice : 16.9 },
			{ name : '复仇者联盟3：无限战争',boxoffice : 23.9 },
			{ name : '头号玩家',boxoffice : 13.9 },
			{ name : '唐人街探案2',boxoffice : 33.9 },
			{ name : '捉妖记2',boxoffice : 22.3 },
			{ name : '海王',boxoffice : 19.5 }
		]
	}
})
//为数组重新排序
exam.movie.sort(function(a,b){
	var x = a.boxoffice;
	var y = b.boxoffice;
	return x < y ? 1 : -1;
});
</script>
</body>
</html>

非变异方法

除了变异方法外，Vue.js还包含了几个非变异方法。调用非变异方法不会改变原始数组，而是返回一个新的数组。当使用非变异方法时，可以用新的数组替换原来的数组。

方法名	说明
filter()	过滤数组元素
concat()	连接多个数组
slice()	获取部分数组元素

实例1：应用slice()方法获取数组中第2个元素后的所有元素。

补充：

slice() 方法可从已有的数组中返回选定的元素

语法：
arrayObject.slice(start,end)

Start：规定从何处开始选取。
End：规定从何处结束选取。

<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);
</script>

由于JavaScript的限制，Vue.js不能检测到下面两种情况引起的数组变化。

直接使用数组索引设置元素，例如，vm.items[1] = ‘Vue.js’。
修改数组的长度，例如，vm.items.length = 2。

为了解决第1种情况，可以使用Vue.set(array,index,value)，或实例方法vm.$set(array,index,value)来设置数组元素的值。设置的数组元素是响应式的，并可以触发视图更新。

说明：实例方法vm.$set(array,index,value)为全局方法Vue.set()的别名。

实例2：应用全局方法Vue.set()设置数组中第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 : '王五'}
            ]
        }
    });
    Vue.set(demo.items,1,{ name : '李三'});
</script>

为了解决第2种情况，可以使用splice()方法修改数组的长度。例如，将数组的长度修改为2。

补充：

splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。

语法：

index : 规定添加/删除项目的位置。
howmany :要删除的项目数量。如果设置为 0，则不会删除项目。
item1, …, itemX: 可选，向数组添加的新项目。

注释：该方法会改变原始数组（集合）。

实例：使用splice()方法修改数组的长度。例如，将数组的长度修改为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.splice(2);
</script>

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 : 25
            }
        }
    });
</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 : 25
            }
        }
    });
</script>

在应用v-for指令遍历对象时，还可以用第3个参数为对象提供索引。

语法格式：(value,key,index) in object

说明：object为对象名称，value为对象属性值的别名，key为对象属性名的别名，index为对象的索引。

实例：应用v-for指令输出对象中的属性和相应的索引。

<div id="box">
    <ul>
        <li v-for="(value,key,index) in object">
            {{index}} - {{key}} : {{value}}
        </li>
    </ul>
</div>
<script type="text/javascript">
    var demo = new Vue({
        el : '#box',
        data : {
            object : {
                name : '张三',
                sex : '男',
                age : 25
            }
        }
    });
</script>

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 : 25
            }
        }
    });
    Vue.set(demo.object,'interest','唱歌');
</script>

如果需要向对象中添加多个响应式属性，可以使用Object.assign()方法。

语法格式：

Object.assign(target, source1, source2);
第一个参数为目标对象，后面的为要合并的对象

注意：在使用该方法时，需要将源对象的属性和新添加的属性合并为一个新的对象。

实例：应用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 : 25
            }
        }
    });
    demo.object = Object.assign({},demo.object,{
        interest : '唱歌',
        address : '长春市'
    });
</script>

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 exam = new Vue({
        el:'#example',
        data:{
            salary:30
        }
    })
</script>

实例：使用v-for指令输出九九乘法表。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>输出九九乘法表</title>
<style>
span{
	color: green;
    fontSize: 20px;
	display:inline-block;
	width:80px;
	height:30px
}
</style>
<script src="../JS/vue.js"></script>
</head>
<body>
<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>
</body>
</html>

标签

#javascript #vue.js #html