目录
1.1定义：
v-if用于条件判断，来判断Dom元素是否显示。
1.2用法：
（1），单独使用v-if，变量为布尔值，为true才渲染Dom。false不渲染Dom。
（2），可以将变量写成能转换为布尔值的表达式。
（3），v-if、v-else、v-else-if联合使用相当于if、elseif、else，但是在条件比较多的时候建议使用计算属性。
1.3案例代码展示：
<!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:15
}
}
})
</script>
</body>
</html>
1.4拓展：
（1）v-if渲染DOM，为false时移除显示，是比较强硬的手段，直接将节点删除。
（2），v-if，v-else-if，else，配合使用，一旦符合条件，不执行其他的条件
（3）else后面不用写表达式，不用判断，其他不满足条件，会直接执行。
2，v-show
2.1，定义：
条件渲染页面，也是布尔值，true，渲染页面，false隐藏。
2.2用法：
（1）实际上是操作dom节点的显示与隐藏，相当于css中display属性。
（2）false时，隐藏元素，实际还在，只是不显示。
2.3案例代码展示：
<!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-show="isShow">继续战斗</h2>
</div>
<script>
const vm = new Vue({
el:'#app',
data(){
return {
isShow:false
}
}
})
</script>
</body>
</html>
3，v-if与v-show的区别和使用场景
（1），v-if显示与隐藏元素是通过删除和添加节点来完成的，v-show是通过对节点进行display：none/block操作，并没有删除节点。
（2）v-if性能上要比v-show差，开销比较大。
（3），如果要实现频繁点击功能操作，推荐使用v-show，性能好，开销小。