当前位置：主页 > 查看内容

3.Vue.js前端框架：条件判断与列表渲染

发布时间：2021-06-25 00:00| 有位朋友查看

简介：3.1 条件判断在视图中经常需要控制某些DOM元素的显示或隐藏。Vue.js提供了多个指令来实现条件的判断包括 v-if、v-else、v-else-if、v-show指令。下面分别进行介绍。 3.1.1 v-if指令 v-if 指令可以根据表达式的值来判断是否输出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前端框架：计算属性与监听属性，希望大家多多支持和关注。

；原文链接：https://blog.csdn.net/qq_44725331/article/details/115652930
本站部分内容转载于网络，版权归原作者所有，转载之目的在于传播更多优秀技术内容，如有侵权请联系QQ/微信：153890879删除，谢谢！

上一篇：基于jsp:included的使用与jsp:param乱码的解决方法 下一篇：蓝桥杯Java组近两年真题练习总结（持续更新中）

随机推荐

ASP调用远程XML数据的代码(alexa排名数据

复制代码代码如下: % URL="http://news.163.com/special/00011K6L/rss_newstop....
未在本地计算机上注册“microsoft.ACE.ol

错误描述：在开发.net项目中，通过microsoft.ACE.oledb读取excel文件信息时，报...
Laravel框架源码解析之反射的使用详解

本文实例讲述了Laravel框架源码解析之反射的使用。分享给大家供大家参考，具体如...
asp 合并记录集并删除的sql语句

DELETEFROMTablesWHEREIDNOTIN(SELECTMin(ID)FROMTablesGROUPBYName) Min的话保...
浅谈html特殊字符编码css3 content:＂我

项目中用到的一些特殊字符和图标 html代码 XML/HTML Code 复制内容到剪贴板 div ...
jsp实现仿QQ空间新建多个相册名称并向相

工具：Eclipse，Oracle，smartupload.jar；语言：jsp，Java；数据存储：Oracle。...
区块链第2次学习讨论总结

4月11日20:30~22:00通过腾讯会议进行了第二次在线学习讨论我把学习笔记整理一下...
正则表达式匹配，替换，查找

上篇文章给大家介绍了 Java正则表达式匹配，替换，查找，切割的方法，接下来，...
时序数据库的秘密 —— 快速检索

Elasticsearch 是通过 Lucene 的倒排索引技术实现比关系型数据库更快的过滤。特...
正则表达式中不区分大小写的写法

正则忽略大小写 – RegexOptions.IgnoreCase 例如：复制代码代码如下: Str = R...

3.Vue.js前端框架：条件判断与列表渲染

3.1 条件判断

3.1.1 v-if指令

3.1.2 在 template 元素中使用 v-if

3.1.3 v-else指令

3.1.4 v-else-if 指令

3.1.5 v-show 指令

3.1.6 v-if 和 v-show 的比较

3.2 列表渲染

3.2.1 应用 v-for 指令遍历数组

3.2.2 在 template 元素中使用 v-for

3.2.3 数组更新检测

3.2.4 应用 v-for 指令遍历对象

3.2.5 向对象中添加属性

3.2.6 应用 v-for 指令遍历整数

推荐图文

fckediter javascript事件函数代码

大厂都这样使用MySQL8进行条件查询

[译] APT分析报告：09.伊朗APT34更新武器库——Side

ES2020让代码更优美的运算符 (?.) (??)

App公共测试用例梳理

Webpack知识整理———插件&提高开发体验

随机推荐

ASP调用远程XML数据的代码(alexa排名数据

未在本地计算机上注册“microsoft.ACE.ol

Laravel框架源码解析之反射的使用详解

asp 合并记录集并删除的sql语句

浅谈html特殊字符编码css3 content:＂我

jsp实现仿QQ空间新建多个相册名称并向相

区块链第2次学习讨论总结

正则表达式匹配，替换，查找

时序数据库的秘密 —— 快速检索

正则表达式中不区分大小写的写法

关于我们