3.Vue.js前端框架：条件判断与列表渲染
2024-06-10 06:57:43
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.Vue.js前端框架：条件判断与列表渲染相关推荐
- 10.Vue.js前端框架：过渡
1.过渡的作用 Vue.js 内置了一套过渡系统,该系统是 Vue.js 为 DOM 动画效果提供的一个特性.在插入.更新或者移除 DOM 时可以触发 CSS 过渡和动画,从而产生过渡效果. 2.单元 ...
- Web前端-Vue.js必备框架（一）
Web前端-Vue.js必备框架(一) <!DOCTYPE html> <html lang="en"> <head><meta char ...
- Web前端-Vue.js必备框架（二）
Web前端-Vue.js必备框架(二) vue调式工具vue-devtools 过滤器:vue.js允许你自定义过滤器,可被用作一些常见的文本格式化. mustache插值和v-bind表达式. vu ...
- 浅析Vue.js 中的条件渲染指令
1 应用于单个元素 Vue.js 中的条件渲染指令可以根据表达式的值,来决定在 DOM 中是渲染还是销毁元素或组件. html: <div id="app"> < ...
- Vue+Iview前端框架搭建
Vue+Iview前端框架搭建 前端搭建 插件介绍 引入到项目 前端搭建 Vue+Iview前端框架需要的插件 插件介绍 Vue,Iview,常用的v-charts Vue.js , 点我到官网.笔者 ...
- Vue.js UI框架比较
Vue 是什么? Vue.js 是 Evan You 开发的渐进式 JavaScript 框架.开发者能够通过撰写 *.vue 文件,基于 <template>, <style> ...
- Vue.js前端开发实践第一章课后作业
课后习题 一.填空题 1. Vue是一套构建用户界面的渐进式框架. 2. MVVM主要包含3个部分,分别是Model. View和ViewModel. 3. Vue 中通过refs属性获取相应DOM元 ...
- 2018几大主流的 UI/JS 前端框架
2016年开始应该是互联网飞速发展的几年,同时也是Web前端开发非常火爆的一年,Web 前端技术发展速度让人感觉几乎不是继承式的迭代,而是一次次的变革和创造.这一年中有很多热门的前端开发框架,下面源码 ...
- 比较流行的js前端框架
1.库/框架选型: 图中的也有一些没用过,中小型pc端项目的话在做技术选型时会多去尝试未用过的,这样可以快速去实践新东西. pc端会使用jquery做一些效果处理,移动端一般用zepto,更轻便一些, ...
最新文章
- 数据库的介绍、分类、作用和特点
- jquery获取主机地址和端口
- Java项目-基于SSM实现律师事务所管理平台
- 算法专家解读 | 开放搜索教育搜题能力和实践
- 读取txt文件赋值到DataGridView中
- 聚类分析在用户行为中的实例_用户关注行为数据分析过程详解-描述统计+聚类...
- perl-regexp_使用Regexp :: Common在Perl中轻松进行数据验证
- 编译使用CEF2623遇到的错误解决办法
- 主干网络系列(2) -ResNet V2:深度残差网络中的恒等映射
- 把mdb文件导入SQL Server 软件的解决方法
- 【免费】文字转换语音合成软件地摊叫卖录音真人配音广告制作朗读播音软件
- idea使用maven私服时下载源码
- 用PPT给证件换背景或衣服，so easy~
- 时间差太大导致Windows时间同步无法自动更新时间
- 1.urllib爬取数据
- 大数据Kudu使用方法
- UE4VR学习笔记3
- c语言中unsigned long,unsigned long 的用法
- 网站策划文案－新闻发布系统简介
- 组态+数据大屏可视化