v-if
根據表達式的值true或false在DOM中生成或者移除一個元素（或多個元素）。有點類似JavaScript中的if條件判斷。在Vue中除了v-if也有v-else-if和v-else之類，但是它們不能單獨使用，要和v-if配合使用；
v-if 是 真正 的條件渲染，因為它會確保在切換過程中條件塊內的事件監聽器和子組件適當地被銷毀和重建；也是惰性的：如果在初始渲染時條件為假，則什么也不做——直到條件第一次變為真時，才會開始渲染條件塊。是真正的做到元素節點的銷毀與顯示
v-show
除了v-if之外，Vue還提供v-show也可以控制元素的渲染。v-show和v-if功能有點相似，其中v-if依賴於控制DOM節點，而v-show是依賴於控制DOM節點的display屬性。當v-show傳入的值為true時，對應DOM元素的display的值為block之類的，反之為false時，display的值為none。也就是用戶看不到元素的顯示，但其DOM元素還是存在的。
注意：v-show 不支持<template>語法，也不支持v-else語法
v-if 和 v-show 區分使用場景
v-if和v-show都能控制DOM元素的顯示和隱藏，但是在切換v-if模塊時，Vue有一個局部編譯/卸載過程，因為v-if中的模板可能包括數據綁定或者子組件，v-if是真是的條件渲染，它會確保條件塊在切換時合適的銷毀與重建條件塊內的時間監聽器和子組件。
v-if 是“真正的”條件渲染，因為它會確保在切換過程中條件塊內的事件監聽器和子組件適當地被銷毀和重建v-if 也是惰性的：如果在初始渲染時條件為假，則什么也不做——直到條件第一次變為真時，才會開始渲染條件塊。相比之下，v-show 就簡單得多——不管初始條件是什么，元素總是會被渲染，並且只是簡單地基於 CSS 進行切換。
v-if 有更高的切換開銷，v-show有更高的初始渲染開銷。如果需要頻繁切換，則使用v-show 較好，如果運行條件不太可能改變，使用v-if較好。
這兩個都是Vue的內部指令，而且都是用來控制元素的渲染。只不過，v-if判斷是否加載，可以減輕服務器的壓力，在需要時加載;v-show調整DOM元素的CSS的dispaly屬性，可以使客戶端操作更加流暢。雖然這兩都都能很好的控制元素的渲染，但實際使用的時候，更應該根據自己的場景來判斷使用哪一個指令。