v-if和v-show可能是日常開發中最常用的兩個指令，雖然看上去兩者功能是類似的，但是兩者還是存在很大區別的。

 v-if與v-show區別：

在切換 v-if 塊時，Vue.js 有一個局部編譯/卸載過程，因為 v-if 之中的模板也可能包括數據綁定或子組件。v-if 是真實的條件渲染，因為它會確保條件塊在切換當中合適地銷毀與重建條件塊內的事件監聽器和子組件。

v-if 也是惰性的：如果在初始渲染時條件為假，則什么也不做——在條件第一次變為真時才開始局部編譯（編譯會被緩存起來）。

相比之下，v-show 簡單得多——元素始終被編譯并保留，只是簡單地基于 CSS 切換。

簡單來說二者最大的區別是v-if只會在滿足條件時才會編譯，而v-show不管是否滿足條件始終會編譯，v-show的顯示與隱藏只是簡單的切換CSS的display屬性。

 適用場景：

明白了二者的本質區別后什么時候適合用v-if什么時候用v-show也變得簡單了。

一般來說，v-if 有更高的切換消耗而 v-show 有更高的初始渲染消耗。因此，如果需要頻繁切換 v-show 較好，如果在運行時條件不大可能改變 v-if 較好。

比如說現在很多頁面在不同端表現是不同的，最常見的是很多的APP頁面在微信端打開時頁面上會顯示下載的提示，而在APP內部則不會，像這樣的情況每個端的狀態在加載時就是確定的不會變的就適合用v-if，這樣在APP內打開時顯示下載的部分直接就不會編譯。

而像頁面上元素根據不同條件顯示/隱藏這樣的地方用v-show是最合適的了，因為像這種基本上兩個狀態要頻繁切換，如上面所說，v-show的切換消耗是小于v-if的。

 多條件

很多時候代碼中需要多條件判斷，但是vue中只有v-if和v-else，沒有v-elseif這樣的指令。雖然沒有類似的指令，但依舊還是有幾種方法可以解決這個問題。

 方法一:template

<div v-if="xxx"></div><template v-else><div v-if="yyy"></div><div v-else></div></template>

 方法二：partical

元素是已注冊的 partial 的插槽，partial 在插入時被 Vue 編譯。 元素本身會被替換。 元素需要指定 name 特性。

這貨讓人想起javaScript原生的fragement元素，但卻不是一個東西。partial有靜態和動態之分，而要解決上面的問題就要用到動態partial。

示例：

// 注冊 partialVue.partial('my-partial', '<p>This is a partial! {{msg}}</p>')<!-- 靜態 partial --><partial name="my-partial"></partial><!-- 動態 partial --><!-- 渲染 partial，id === vm.partialId --><partial v-bind:name="partialId"></partial>

要解決多個條件的問題，我們就可以為每種情況預先注冊好各自的partial，然后將partial的name屬性綁定到判斷條件，這樣就能實現多個條件判斷。