## `v-if` 在字符串模板中，比如 Handlebars，我們得像這樣寫一個條件塊： ``` html <!-- Handlebars 模板 --> {{#if ok}} <h1>Yes</h1> {{/if}} ``` 在 Vue 中，我們使用 `v-if` 指令實現同樣的功能： ``` html <h1 v-if="ok">Yes</h1> ``` 也可以用 `v-else` 添加一個“else 塊”： ``` html <h1 v-if="ok">Yes</h1> <h1 v-else>No</h1> ``` ### 在 `<template>` 元素上使用 `v-if` 條件渲染分組 因為 `v-if` 是一個指令，所以必須將它添加到一個元素上。但是如果想切換多個元素呢？此時可以把一個 `<template>` 元素當做不可見的包裹元素，并在上面使用 `v-if`。最終的渲染結果將不包含 `<template>` 元素。 ``` html <template v-if="ok"> <h1>Title</h1> <p>Paragraph 1</p> <p>Paragraph 2</p> </template> ``` ### `v-else` 你可以使用 `v-else` 指令來表示 `v-if` 的“else 塊”： ``` html <div v-if="Math.random() > 0.5"> Now you see me </div> <div v-else> Now you don't </div> ``` `v-else` 元素必須緊跟在帶 `v-if` 或者 `v-else-if` 的元素的后面，否則它將不會被識別。 ### `v-else-if` > 2.1.0 新增 `v-else-if`，顧名思義，充當 `v-if` 的“else-if 塊”，可以連續使用： ```html <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> ``` 類似于 `v-else`，`v-else-if` 也必須緊跟在帶 `v-if` 或者 `v-else-if` 的元素之后。 ### 用 `key` 管理可復用的元素 Vue 會盡可能高效地渲染元素，通常會復用已有元素而不是從頭開始渲染。這么做除了使 Vue 變得非常快之外，還有其它一些好處。例如，如果你允許用戶在不同的登錄方式之間切換： ``` html <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`。 自己動手試一試，在輸入框中輸入一些文本，然后按下切換按鈕： {% raw %} <div id="no-key-example" class="demo"> <div> <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> </div> <button @click="toggleLoginType">Toggle login type</button> </div> <script> new Vue({ el: '#no-key-example', data: { loginType: 'username' }, methods: { toggleLoginType: function () { return this.loginType = this.loginType === 'username' ? 'email' : 'username' } } }) </script> {% endraw %} 這樣也不總是符合實際需求，所以 Vue 為你提供了一種方式來表達“這兩個元素是完全獨立的，不要復用它們”。只需添加一個具有唯一值的 `key` 屬性即可： ``` html <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> ``` 現在，每次切換時，輸入框都將被重新渲染。請看： {% raw %} <div id="key-example" class="demo"> <div> <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> </div> <button @click="toggleLoginType">Toggle login type</button> </div> <script> new Vue({ el: '#key-example', data: { loginType: 'username' }, methods: { toggleLoginType: function () { return this.loginType = this.loginType === 'username' ? 'email' : 'username' } } }) </script> {% endraw %} 注意，`<label>` 元素仍然會被高效地復用，因為它們沒有添加 `key` 屬性。 ## `v-show` 另一個用于根據條件展示元素的選項是 `v-show` 指令。用法大致一樣： ``` html <h1 v-show="ok">Hello!</h1> ``` 不同的是帶有 `v-show` 的元素始終會被渲染并保留在 DOM 中。`v-show` 只是簡單地切換元素的 CSS 屬性 `display`。 <p class="tip">注意，`v-show` 不支持 `<template>` 元素，也不支持 `v-else`。</p> ## `v-if` vs `v-show` `v-if` 是“真正”的條件渲染，因為它會確保在切換過程中條件塊內的事件監聽器和子組件適當地被銷毀和重建。 `v-if` 也是**惰性的**：如果在初始渲染時條件為假，則什么也不做——直到條件第一次變為真時，才會開始渲染條件塊。 相比之下，`v-show` 就簡單得多——不管初始條件是什么，元素總是會被渲染，并且只是簡單地基于 CSS 進行切換。 一般來說，`v-if` 有更高的切換開銷，而 `v-show` 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用 `v-show` 較好；如果在運行時條件很少改變，則使用 `v-if` 較好。 ## `v-if` 與 `v-for` 一起使用 <p class="tip">**不推薦**同時使用 `v-if` 和 `v-for`。請查閱[風格指南](/v2/style-guide/#避免-v-if-和-v-for-用在一起-必要)以獲取更多信息。</p> 當 `v-if` 與 `v-for` 一起使用時，`v-for` 具有比 `v-if` 更高的優先級。請查閱[列表渲染指南](list.html#v-for-with-v-if) 以獲取詳細信息。