熟悉 Angular 的同學對指令肯定不會陌生，Vue中也借鑒了指令這一特性，在 Vue 中指令都是帶有 v- 的特殊屬性，那麼指令有什麼作用呢？ 我的理解就是：指令是用來控制 DOM 元素的行為，例如最簡單的顯示，隱藏。 Vue 中有很多指令，在今後的學習過程總我們會逐步的學習，今天我們就來說說我 ...
熟悉 Angular 的同學對指令肯定不會陌生，Vue中也借鑒了指令這一特性，在 Vue 中指令都是帶有 v- 的特殊屬性，那麼指令有什麼作用呢？
我的理解就是：指令是用來控制 DOM 元素的行為，例如最簡單的顯示，隱藏。
Vue 中有很多指令，在今後的學習過程總我們會逐步的學習，今天我們就來說說我們非常常用的兩個條件指令 v-if 和 v-show。
v-if
看到 v-if 你肯定會想到 Javascrip 中的 if else 條件判斷語句，你會想是不是還會有 v-else 指令，沒錯 Vue 中不僅給我們提供了 v-else 指令而且還給我們提供了 v-else-if指令。
既然這樣我們就很好理解 v-if 指令了，其實就是根據表達式的值是真(true)假(false)來重建或者銷毀一個我們綁定的 DOM 元素。
怎麼樣，通過我這麼一說你對 if 指令有了更清楚的認識了吧？
什麼東西啊，你這叫解釋的還行？（有些人）
好吧，我覺得我解釋的還行，如果你覺得不行，我們就直接一點擼代碼寫個案例，讓你一看就懂。
<div id="root">
<div v-if="isShow">你看不見我，你看不見我，你看不見我</div>
</div>
<script>
var vm = new Vue({
el: "#root",
data: {
isShow: false
}
});
</script>
執行上面的代碼，你會發現頁面上除了什麼都沒有，還是什麼都沒有，總之你什麼都看不見，就是不讓你看見，怎麼辦？
我告訴你這個非常好辦呀，把它打出來就行了，我們在瀏覽器的控制台打 vm.isShow=true 你就能看出效果了，不信？那我們就來試試。
看到了上面這個神奇的效果，我們再來思考一個問題，我們上面是在切換單個 DOM 元素，我們能不能來切換多個元素或者說嵌套元素呢？
<div id="root">
<div v-if="isShow">
<p>你看不見我，你看不見我，你看不見我</p>
<p>呀，好像被你發現了！</p>
</div>
</div>
<script>
var vm = new Vue({
el: "#root",
data: {
isShow: false
}
});
</script>
正如我們的預期一樣，我們嵌套多層元素也是沒有問題的，效果還是那個效果。不過在 Vue 中推薦我們使用 <template> 標簽包裹元素。併在上面使用 v-if，最終渲染結果將不包括 <template> 元素。
<div id="root">
<template v-if="isShow">
<p>你看不見我，你看不見我，你看不見我</p>
<p>呀，好像被你發現了！</p>
</template>
</div>
<script>
var vm = new Vue({
el: "#root",
data: {
isShow: true
}
});
</script>
可以看到我們代碼中使用的 <template> 標簽在渲染的時候沒有顯示
v-else
上面我們已經提到了 v-else指令，它必須緊跟在帶 v-if 或者 v-else-if 的元素的後面，否則它將不會被識別。，我們用一個例子來看下它的用。
<div id="root">
<h5>Modeng 是怎麼樣的一個人？</h5>
<div v-if="isHandsome">非常帥</div>
<div v-else>還是帥</div>
</div>
<script>
var vm = new Vue({
el: "#root",
data: {
isHandsome : true
}
});
</script>
我們會看到這樣一個效果
如果我們修改下條件表達式的值
你會發現結果怎麼還是帥，難道 Modeng 除了帥就沒有別的結果了嗎？其實，仔細的同學會發現，兩個帥的不一樣。
在這裡只是和大家開個玩笑，其實我沒有大家想象的那麼帥，只是想通過這個例子讓大家更容易理解和記住 v-else，你會發現我們的 v-if v-else指令和我們理解的 Javascript 中的 if else 一樣都是非此即彼的結果。
我們在瀏覽網站的時候，經常會遇到這麼一個情況，你在沒有登陸的時候你看到的以一種內容，你在登陸的時候看到的又是另一種內容。如果我們用 if else指令就很好實現，大家可以自己嘗試一下，我給一個簡單的例子，更好玩的大家去發現。
<div id="root">
<template v-if="isLogined">
<div>恭喜，恭喜，你竟然看到了我帥氣的容貌！</div>
</template>
<template v-else>
<div>登陸才可以查看更多內容</div>
</template>
</div>
<script>
var vm = new Vue({
el: "#root",
data: {
isLogined : false
}
});
</script>
v-else-if
顧名思義，我們不做過多的解釋，因為前面我們已經解釋過，大家都明白的，v-else-if 還可以連續使用。
v-else-if 也必須緊跟在帶 v-if 或者 v-else-if 的元素之後。
<div id="root">
<div v-if="type === 'A'">我是誰？</div>
<div v-else-if="type === 'B'">我在哪？</div>
<div v-else-if="type === 'C'">我怎麼了？</div>
<div v-else>誰能救救我！</div>
</div>
<script>
var vm = new Vue({
el: "#root",
data: {
type: 'A'
}
});
</script>
看個動圖啥都明白了。
v-show
另外一個根據條件展示 DOM 元素的指令，用法與 v-if大致相同。
不同點是：v-if控制的DOM元素的添加與刪除，會存在 DOM 的渲染與銷毀的過程。而 v-show 只是簡單的控制元素的 CSS 的 display 屬性。
當 v-show 的值為 true 時，綁定 DOM 的 display: block，當值為 false 時，綁定 DOM 的 display: none。
<div id="root">
<div v-show="isShow">我只是用來控制 display 的屬性值</div>
</div>
<script>
var vm = new Vue({
el: "#root",
data: {
isShow: true
}
});
</script>
我們可以清楚的看到 DOM 元素始終是存在的，v-show 只是利用元素的 display 屬性控制著元素的顯示隱藏。
註意，v-show 不支持 <template> 元素，也不支持 v-else
v-if 與 v-show
看完了文章，你會發現我們可以利用v-if和v-show 兩個指令來控制我們 DOM 元素的行為。但是兩者又存在一定的區別，那麼你該如何去選擇使用那個指令呢？
來一起看官方的回答：
v-if是“真正”的條件渲染，因為它會確保在切換過程中條件塊內的事件監聽器和子組件適當地被銷毀和重建。v-if也是惰性的：如果在初始渲染時條件為假，則什麼也不做——直到條件第一次變為真時，才會開始渲染條件塊。- 相比之下
v-show就簡單得多——不管初始條件是什麼，元素總是會被渲染，並且只是簡單地基於 CSS 進行切換。
一般來說 v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在運行時條件很少改變，則使用 v-if 較好。
總結
- 我們可以利用不同的方法去控制我們的 DOM 行為。
v-if和v-show都可以控制元素的顯示隱藏但是有本質區別的，v-if是控制元素的添加與刪除，而v-show只是控制元素的display屬性。- 認識到兩者的區別我們就可以肯定自己的場景去選擇對應的方法，如果你的元素頻繁切換建議使用
v-show，反之你可以使用v-if。
