v-if
# <template> 中 v-if 條件組
因?yàn)?v-if 是一個(gè)指令，需要將它添加到一個(gè)元素上。但是如果我們想切換多個(gè)元素呢？此時(shí)我們可以把一個(gè) <template> 元素當(dāng)做包裝元素，并在上面使用 v-if，最終的渲染結(jié)果不會(huì)包含它。
<template v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
# v-else
可以用 v-else 指令給 v-if 添加一個(gè) “else” 塊：
<div v-if="Math.random() > 0.5">
Sorry
</div>
<div v-else>
Not sorry
</div>
v-else 元素必須緊跟在 v-if 元素或者 v-else-if的后面——否則它不能被識(shí)別。
# v-else-if
2.1.0 新增
v-else-if，顧名思義，用作 v-if 的 else-if 塊。可以鏈?zhǔn)降亩啻问褂茫?/p>
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
# 使用 key 控制元素的可重用
Vue 嘗試盡可能高效的渲染元素，通常會(huì)復(fù)用已有元素而不是從頭開始渲染。這么做除了使 Vue 更快之外還可以得到一些好處。如下例，當(dāng)允許用戶在不同的登錄方式之間切換:
<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 不會(huì)刪除用戶已經(jīng)輸入的內(nèi)容，兩個(gè)模版由于使用了相同的元素，<input> 會(huì)被復(fù)用，僅僅是替換了他們的 placeholder。
這樣也不總是符合實(shí)際需求，所以 Vue 提供一種方式讓你可以自己決定是否要復(fù)用元素。你要做的是添加一個(gè)屬性 key ，key 必須帶有唯一的值。
<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>
現(xiàn)在輸入文本將會(huì)在每次切換時(shí)重新渲染。
v-show
另一個(gè)根據(jù)條件展示元素的選項(xiàng)是 v-show 指令。用法大體上一樣：
<h1 v-show="ok">Hello!</h1>
不同的是有 v-show 的元素會(huì)始終渲染并保持在 DOM 中。v-show 是簡單的切換元素的 CSS 屬性 display 。
注意
v-show不支持<template>語法。
v-show VS v-if
v-if 是真實(shí)的條件渲染，因?yàn)樗鼤?huì)確保條件塊在切換當(dāng)中適當(dāng)?shù)劁N毀與重建條件塊內(nèi)的事件監(jiān)聽器和子組件。
v-if 也是惰性的：如果在初始渲染時(shí)條件為假，則什么也不做——在條件第一次變?yōu)檎鏁r(shí)才開始局部編譯（編譯會(huì)被緩存起來）。
相比之下， v-show 簡單得多——元素始終被編譯并保留，只是簡單地基于 CSS 切換。
一般來說， v-if 有更高的切換消耗而 v-show 有更高的初始渲染消耗。因此，如果需要頻繁切換使用 v-show 較好，如果在運(yùn)行時(shí)條件不大可能改變則使用v-if 較好。
