Vue中的条件渲染
1.通过 v-if 指令，决定标签是否在页面展示或存在（当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue中的条件渲染</title>
<script src = './vue.js'></script>
</head>
<body>
<div id ='app'>
<div v-if="show">{{message}}</div>
<script>
var vm = new Vue({
el:'#app',
data:{
show:false,
message:"Hello World"
},
})
</script>
</body>
</html>输出：当为 true 时，显示数据；
当为 false 时，不显示数据；
2.v-show
v-if 和 v-show :二者在刚开始运行时均取决于 show 变量，开始均为 false ，故二者均不展示；但区别在于，v-show 的页面实际是存在的，只是设置成了 display:none;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue中的条件渲染</title>
<script src = './vue.js'></script>
</head>
<body>
<div id ='app'>
<div v-if="show" data-test="v-if">{{message}}</div>
<div v-show="show" data-test="v-show">{{message}}</div>
<script>
var vm = new Vue({
el:'#app',
data:{
show:false,
message:"Hello World"
},
})
</script>
</body>
</html>输出：show = true 时；
show = false 时，v-if 不存在DOM中，但 v-show 存在，只是设置成了 display:none;频繁的显示与隐藏中性能更高。
3.v-else
v-if 和 v-else 必须紧跟在一起使用，之间不能有其他程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue中的条件渲染</title>
<script src = './vue.js'></script>
</head>
<body>
<div id ='app'>
<div v-if="show" >{{message}}</div>
<div v-else=>Bye World</div>
<script>
var vm = new Vue({
el:'#app',
data:{
show:false,
message:"Hello World"
},
})
</script>
</body>
</html>输出：show = false 时
show = true 时
4.v-else-if
v-if 、v-else-if 和 v-else必须紧跟在一起使用，之间不能有其他程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue中的条件渲染</title>
<script src = './vue.js'></script>
</head>
<body>
<div id ='app'>
<div v-if="show ==='a'" >This is A</div>
<div v-else-if="show ==='b'" >This is B</div>
<div v-else=>This is others</div>
<script>
var vm = new Vue({
el:'#app',
data:{
show:false,
message:"Hello World"
},
})
</script>
</body>
</html>输出：开始默认是 a
输出改为 b
输出改为 c(和 a、b都不相同)
5.key 值
当给某个元素添加 key值 时，就会是唯一的元素，若二者 key 值不一样则不会尝试复用以前的标签；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue中的条件渲染</title>
<script src = './vue.js'></script>
</head>
<body>
<div id ='app'>
<div v-if="show">
用户名：<input key="username"/>
</div>
<div v-else>
邮箱名：<input key="email"/>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
show:false,
},
})
</script>
</body>
</html>输出：
show = true 时；文本框中的内容被清空
补充：若不设置 key 值，则会复用已经存在的 input 标签
输入改为 true
