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-if="true">我出来了</div> <div v-if="false">我不出去</div>v-if v-else-if v-else指令
类似我们之前学的if else语句，这里也是一样的
温度：<input type="number" v-model="temprature" /><br /><br /> 天气： <span v-if="temprature<=5">寒冷</span> <span v-else-if="temprature>5&&temprature<25">凉爽</span> <span v-else>炎热</span> <hr />template标签
template标签/元素只是起到占位的作用，不会真正的出现在页面上，也不会影响页面的结构。
需求：同时控制以下3个标题一起出现或者隐藏
<template v-if="true"> <h2>六下匹，人当送，内。</h2> <h3>六下匹，人当送，内。</h3> <h4>六下匹，人当送，内。</h4> </template>v-show指令
和if类似同样是控制是否显示，指令的值：true/false
v-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" :key="element.id"
或者
v-for="(element, index) of elements" :key="element.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>{{index+1}}</td> <td>{{vip.name}}</td> <td>{{vip.age}}</td> <td><input type="checkbox" /></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，随后替换掉页面中之前的真实DOM
b:旧虚拟DOM中未找到与新虚拟DOM相同的key，则直接创建新的真实DOM，随后渲染到页面
用index作为key会引发的问题
第一个问题：效率低。
第二个问题：非常严重了。产生了错乱。尤其是对数组当中的某些元素进行操作。（非末尾元素。）
<body> <div id="app"> <h1>{{msg}}</h1> <table> <tr> <th>序号</th> <th>英雄</th> <th>能量值</th> <th>选择</th> </tr> <!-- 这种写法会出现错乱 --> <tr v-for="(hero,index) in heros" :key="index"> <td>{{index+1}}</td> <td>{{hero.name}}</td> <td>{{hero.power}}</td> <td><input type="checkbox" /></td> </tr> <!-- 使用id则不会 --> <tr v-for="(hero,index) in heros" :key="hero.id"> <td>{{index+1}}</td> <td>{{hero.name}}</td> <td>{{hero.power}}</td> <td><input type="checkbox"></td> </tr> </table> <button @click="add">添加英雄麦文</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>