v-if
設定 v-if 的元素只會在其 Value 為 Truthy 時被渲染。
<div id="app">
<span v-if="isA">A</span>
</div>
var vm = new Vue({
el: '#app',
data: {
isA: true
}
});
當 isA 為 true 時 <span>A</span> 會出現在畫面上，但當 isA 為 false 時，<span>A</span> 整個 DOM 會不存在於 HTML 內。
v-else、v-else-if
可以搭配 v-else-if 和 v-else 來做判斷運算。
<div id="app">
<div v-if="type === A">A</div>
<div v-else-if="type === B">B</div>
<div v-else>C</div>
</div>
var vm = new Vue({
el: '#app',
data: {
type: "B"
}
});
注意事項
v-else沒有 Value ，它是一個單純的 Directive。v-else-if可以使用多次。v-else-if跟v-else相同必須緊跟在v-if或是v-else-if設置元素之後，而且必須是同一層的元素。
使用 template 包裹多層元素
因為 v-if 只能使用在一個元素上，所以當需要多個元素做切換時，可以使用 <template> 這個標籤把多個元素包裹起來。
<template> 標籤只做包裹元素之用，實際被渲染出來時，並不存在，因此不影響原本網頁元素的配置。
<span v-if="isA">A1</span>
<span v-if="isA">A2</span>
<span v-if="isA">A3</span>
等同於下例
<template v-if="isA">
<span>A1</span>
<span>A2</span>
<span>A3</span>
</template>
使用 key 決定可重覆使用的元素
Vue 會儘可能高效地渲染元素。如果是相同的結構則會繼續沿用原本的 DOM 元素，並不會重新渲染，用這個方法減少重新渲染所需的資源以提高效能。
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address">
</template>
切換 loginType 將不會清除使用者已經輸入的內容。因為兩個模板使用了相同的元素，<input> 不會被替換掉，只是替換了它的 placeholder。
所以 Vue 提供了一種方式來表達“這兩個元素是完全獨立的，不要重複使用它們”。只需要添加一個具有唯一值的 key attribute 即可：
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address" key="email-input">
</template>
v-show
v-show 跟 v-if 在頁面上的效果相同，都是決定元素是否顯示，但其渲染的方式不同。
v-if: 真正的建立及銷毀元素。v-show: 元素始終會被渲染並保留在 DOM 中，只是使用 display 的樣式屬性切換顯示效果。
<span v-show="isA">A</span>
等同於下例：
<span style="display: none;">A</span>
注意事項
v-show不支持<template>元素，也不支持v-else。
v-if vs v-show
比較兩者在渲染時所需消耗的資源與效能：
- 在初始渲染時，有元素其值為 false ：
v-show>v-if - 若需頻繁切換元素狀態：
v-if>v-show
