一、v-if 的基本使用
v-if用于条件判断，判断Dom元素是否显示。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<h2 v-if="isFlag">我们是勇于战斗的</h2>
<h3 v-if="age<18">我们是青少年</h3>
<h3 v-else-if="age<60">我们是18到60的青壮年</h3>
<h3 v-else>大于60岁我们是老年人</h3>
</div>
<script>
const vm = new Vue({
el:'#app',
data(){
return {
isFlag:false,
age:70
}
}
})
</script>
</body>
</html>
输入各不同年龄段效果：
当isFlag 为false时—隐藏DOM元素
二、v-if 的demo
在登录网站是经常可以选择使用账户名或者邮箱登录的切换按钮。要求点击按钮切换登录方式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<span v-if="isUser">
<label for="username">用户账号</label>
<input type="text" id="username" placeholder="请输入用户名" key="username">
</span>
<span v-else>
<label for="email">用户邮箱</label>
<input type="text" id="email" placeholder="请输入用户邮箱" key="email">
</span>
<button type="button" @click="isUser=!isUser">切换</button>
</div>
<script>
const vm = new Vue({
el: '#app',
data() {
return {
isUser: true
}
}
})
</script>
</body>
</html>
使用v-if和v-else选择渲染指定的Dom，点击按钮对isUser变量取反。
这里有个小问题，如果已经输入了账号了，此时想切换到邮箱输入，输入框未自己清空。
这里需要了解一下vue底层操作，此时input输入框值被复用了。
vue在进行DOM渲染是，处于性能考虑，会复用已经存在的元素，而不是每次都创建新的DOM元素。
在上面demo中，Vue内部发现原来的input元素不再使用，所以直接将其映射对应虚拟DOM，用来复用。
如果不希望出现类似复用问题，可以给对应的dom元素加上
key值，并保证key不同。
<input type="text" id="username" placeholder="请输入用户名" key="username">
<input type="text" id="email" placeholder="请输入用户邮箱" key="email">
三、v-show 以及v-if 的区别
v-show 和 v-if 都有按需控制DOM的显示与隐藏
实现原理：
v-if 指令会动态的创建或移除DOM元素，从而控制元素在页面上的显示与隐藏
v-show 指令会动态为元素添加或移除style="dispaly:none;"样式，从而控制元素的显示与隐藏
区别：
v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此：
- 如果需要非常频繁地切换，则使用v-show较好
- 如果在运行时条件很少改变，则使用v-if较好
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<h2 v-show="isFlag">v-show只是操作元素的style属性display</h2>
<h2 v-if="isFlag">v-if是新增和删除dom元素</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
isFlag:true
}
})
</script>
</body>
</html> v-if 在首次渲染的时候，如果条件为假，什么也不操作，页面当作没有这些元素。当条件为真的时候，开始局部编译，动态的向DOM元素里面添加元素。当条件从真变为假的时候，开始局部编译，卸载这些元素，也就是删除。
v-show 不管条件是真还是假，第一次渲染的时候都会编译出来，也就是标签都会添加到DOM中。之后切换的时候，通过display: none;样式来显示隐藏元素。可以说只是改变css的样式，几乎不会影响什么性能。
四、v-for 中的key
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<p v-for="(item,index) in list" :key="item.id">{{item.name}}-{{item.age}}
<input type="text">
</p>
<button type="button" @click="add">添加</button>
</div>
<script>
var vm=new Vue({
el:'#app',
data(){
return {
list:[
{
id:01,
name:'张三',
age:20
},
{
id:02,
name:'李四',
age:30
},
{
id:03,
name:'王五',
age:40
}
]
}
},
methods:{
add(){
this.list.unshift({
id:04,
name:'赵六',
age:50
})
}
}
})
</script>
</body>
</html>
若用 index
<div id="app">
<p v-for="(item,index) in list" :key="index">{{item.name}}-{{item.age}}
<input type="text">
</p>
<button type="button" @click="add">添加</button>
</div>
总结：
key的作用主要就是为了高效的更新虚拟DOM，使用key值，它会基于key的变化重新排列元素顺序，并且会移除key不存在的元素。它也可以用于强制替换元素/组件而不是重复的使用它。
为何不推荐index作为key值:
当以数组为下标的index作为key值时，其中一个元素(例如增删改查)发生了变化就有可能导致所有的元素的key值发生改变
diff算法时比较同级之间的不同，以key来进行关联，当对数组进行下标的变换时，比如删除第一条数据，那么以后所有的index都会发生改变，那么key自然也跟着全部发生改变，所以index作为key值是不稳定的，而这种不稳定性有可能导致性能的浪费，导致diff无法关联起上一次一样的数据。因此，能不使用index作为key就不使用index。
diff算法相关内容：https://www.jianshu.com/p/32dc90014589