Vue—条件渲染与循环渲染

目录v-if指令v-if v-else-if v-else指令template标签v-show指令v-if和v-show应该如何选择v-for遍历对象遍历字符串遍历指定次数遍历数组虚拟DOM和diff算法虚拟DOM中key的作用diff到底是怎么做对比用index作为key会引发的问题v-if指令v-if指令的值true/false可以控制标签是否渲染div v-iftrue我出来了/div div v-iffalse我不出去/divv-if v-else-if v-else指令类似我们之前学的if else语句这里也是一样的温度input typenumber v-modeltemprature /br /br / 天气 span v-iftemprature5寒冷/span span v-else-iftemprature5temprature25凉爽/span span v-else炎热/span hr /template标签template标签/元素只是起到占位的作用不会真正的出现在页面上也不会影响页面的结构。需求同时控制以下3个标题一起出现或者隐藏template v-iftrue h2六下匹人当送内。/h2 h3六下匹人当送内。/h3 h4六下匹人当送内。/h4 /templatev-show指令和if类似同样是控制是否显示指令的值true/falsev-if和v-show应该如何选择v-show指令是通过修改元素的CSS样式的display属性来达到显示和隐藏的。1. 如果一个元素在页面上被频繁的隐藏和显示建议使用v-show因为此时使用v-if开销比较大。2. v-if的优点页面加载速度快提高了页面的渲染效率。3、v-show 不支持在 template 元素上使用也不能和 v-else 搭配使用。v-for语法格式v-for指令。该指令用在被遍历的标签上v-for(element, index) in elements :keyelement.id或者v-for(element, index) of elements :keyelement.id遍历对象h2遍历对象的属性/h2 ul li v-for(value, propertyName) of user{{propertyName}},{{value}}/li /ul hr /遍历字符串h2遍历字符串/h2 ul li v-for(c,index) of str{{index}},{{c}}/li /ul hr /遍历指定次数h2遍历指定的次数/h2 ul li v-for(num,index) of 10{{index}}, {{num}}/li /ul hr /遍历数组h2遍历数组/h2 !-- 静态列表 -- ul li张三/li li李四/li li王五/li /ul !-- 动态列表 -- ul !-- 1. v-for要写在循环项上。 2. v-for的语法规则 v-for(变量名,index) in/of 数组 变量名 代表了 数组中的每一个元素 -- li v-for(name,index) of names{{name}}-{{index}}/li /ul table tr th序号/th th会员名/th th年龄/th th选择/th /tr tr v-for(vip,index) in vips td{{index1}}/td td{{vip.name}}/td td{{vip.age}}/td tdinput typecheckbox //td /tr /table虚拟DOM和diff算法虚拟DOM在内存中的dom对象diff算法是一种能够快速的比较出两个事物不同之处的算法v-for指令所在的标签中还有一个非常重要的属性:key如果没有指定 :key 属性会自动拿index作为key。这个key是这个dom元素的身份证号/唯一标识。虚拟DOM中key的作用diff到底是怎么做对比key是虚拟DOM中对象的标识当数据发生变化时Vue会根据新数据生成新的虚拟DOM随后Vue进行新虚拟DOM与旧虚拟DOM的差异比较比较规则如下a:旧虚拟DOM中找到与新虚拟DOM中相同的key若虚拟DOM中内容没变直接使用之前的真实DOM若虚拟DOM中内容变了则生成新的真实DOM随后替换掉页面中之前的真实DOMb:旧虚拟DOM中未找到与新虚拟DOM相同的key则直接创建新的真实DOM随后渲染到页面用index作为key会引发的问题第一个问题效率低。第二个问题非常严重了。产生了错乱。尤其是对数组当中的某些元素进行操作。非末尾元素。body div idapp h1{{msg}}/h1 table tr th序号/th th英雄/th th能量值/th th选择/th /tr !-- 这种写法会出现错乱 -- tr v-for(hero,index) in heros :keyindex td{{index1}}/td td{{hero.name}}/td td{{hero.power}}/td tdinput typecheckbox //td /tr !-- 使用id则不会 -- tr v-for(hero,index) in heros :keyhero.id td{{index1}}/td td{{hero.name}}/td td{{hero.power}}/td tdinput typecheckbox/td /tr /table button clickadd添加英雄麦文/button /div script const vm new Vue({ el: #app, data() { return { msg: 虚拟dom与diff算法, heros: [ { id: 101, name: 艾格文, power: 10000 }, { id: 102, name: 麦迪文, power: 9000 }, { id: 103, name: 古尔丹, power: 8000 }, { id: 104, name: 萨尔, power: 6000 }, // { id: 105, name: 麦文, power: 9100 } ], }; }, methods: { add() { let obj { id: 105, name: 麦文, power: 9100 }; this.heros.unshift(obj); }, }, }); /script /body