目录
上一节我们学习了v-show指令，一个通过操作display来切换元素显示状态的指令，但是在View中我们并不仅仅就这一个指令来操作元素的显示状态，这一节我们将来学习另外一个类似的指令v-if
一、指令v-if的语法介绍
这个指令的作用就是：根据表达式的真假，来切换元素的显示状态，但是它操作的不是样式，而是直接操作这个dom元素。
第一种写法：硬编码。
这个同 v-show 一样
二、指令 v-if 代码验证测试
1、实例代码
<!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>09_v-if指令的使用</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id = "app">
<p v-if="true">你好程序员！</p>
<p v-if="isShow">你好北京！</p>
<p v-if="age>17">你成年啦！</p>
<input type="button" value="切换状态-isShow" @click="changeIsShow">
<input type="button" value="切换状态-age" @click="addAge">
</div>
<script>
var app = new Vue({
el: "#app",
data:{
isShow: true,//默认值为true
age: 17,//默认值为17
},
methods: {//定义方法
changeIsShow:function(){//修改isShow的值
this.isShow = !this.isShow;
},
addAge:function(){//修改age的值
this.age++;
console.log(this.age);
}
},
})
</script>
</body>
</html>
2、效果展示
大家可以点击下面两个按钮看看效果，这里就不演示了
三、代码演示 v-show 和 v-if 的区别
1、实例代码
<!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>10_v-if和v-show指令的区别</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id = "app">
<p v-if="isShow">你好北京:v-if</p>
<p v-show="isShow">你好北京:v-show</p>
<input type="button" value="切换状态-isShow" @click="changeIsShow">
</div>
<script>
var app = new Vue({
el: "#app",
data:{
isShow: true,//默认值为true
},
methods: {//定义方法
changeIsShow:function(){//修改isShow的值
this.isShow = !this.isShow;
},
},
})
</script>
</body>
</html>
2、效果展示
（1）显示的时候，我们检查元素如下：
（2）不显示的时候，我们检查元素如下：
使用 v-if 指令的元素，直接从我们dom树中移除了。而使用 v-show 指令，是改变样式，操作元素的 display。
所以频繁使用用v-show指令，反之用v-if，因为操作dom树对于性能的消耗比较大，所以 v-if 指令不适合频繁使用。
四、内容-总结
