目錄
上一節我們學習了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 指令不適合頻繁使用。
四、內容-總結
