目录
[v-if v-else-if v-else指令](#v-if v-else-if v-else指令)
v-if指令
v-if指令的值：true/false，可以控制标签是否渲染
javascript
<div v-if="true">我出来了</div>
<div v-if="false">我不出去</div>v-if v-else-if v-else指令
类似我们之前学的if else语句，这里也是一样的
javascript
温度：<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个标题一起出现或者隐藏
javascript
<template v-if="true">
<h2>六下匹，人当送，内。</h2>
<h3>六下匹，人当送，内。</h3>
<h4>六下匹，人当送，内。</h4>
</template>v-show指令
和if类似同样是控制是否显示，指令的值：true/false
v-if和v-show应该如何选择？
v-show指令是通过修改元素的CSS样式的display属性来达到显示和隐藏的。
-
如果一个元素在页面上被频繁的隐藏和显示，建议使用v-show，因为此时使用v-if开销比较大。
-
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"
遍历对象
javascript
<h2>遍历对象的属性</h2>
<ul>
<li v-for="(value, propertyName) of user">{{propertyName}},{{value}}</li>
</ul>
<hr />遍历字符串
javascript
<h2>遍历字符串</h2>
<ul>
<li v-for="(c,index) of str">{{index}},{{c}}</li>
</ul>
<hr />遍历指定次数
javascript
<h2>遍历指定的次数</h2>
<ul>
<li v-for="(num,index) of 10">{{index}}, {{num}}</li>
</ul>
<hr />遍历数组
javascript
<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会引发的问题
第一个问题：效率低。
第二个问题：非常严重了。产生了错乱。尤其是对数组当中的某些元素进行操作。（非末尾元素。）
javascript
<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>