條件渲染

v-if

在字符串模板中，如 Handlebars，我們得像這樣寫一個(gè)條件塊：

<!-- Handlebars 模板 -->
{{#if ok}}
  <h1>Yes</h1>
{{/if}}

在 Vue.js，我們使用 v-if 指令實(shí)現(xiàn)同樣的功能：

<h1 v-if="ok">Yes</h1>

也可以用 v-else 添加一個(gè) "else" 塊：

<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>

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-show

另一個(gè)根據(jù)條件展示元素的選項(xiàng)是 v-show 指令。用法大體上一樣：

<h1 v-show="ok">Hello!</h1>

不同的是有 v-show 的元素會(huì)始終渲染并保持在 DOM 中。v-show 是簡(jiǎn)單的切換元素的 CSS 屬性 display。

注意 v-show 不支持 <template> 語法。

v-else

可以用 v-else 指令給 v-if 或 v-show 添加一個(gè) "else 塊"：

<div v-if="Math.random() > 0.5">
  Sorry
</div>
<div v-else>
  Not sorry
</div>

v-else 元素必須立即跟在 v-if 或 v-show 元素的后面——否則它不能被識(shí)別。

v-if vs. v-show

在切換 v-if 塊時(shí)，Vue.js 有一個(gè)局部編譯/卸載過程，因?yàn)?v-if 之中的模板也可能包括數(shù)據(jù)綁定或子組件。v-if 是真實(shí)的條件渲染，因?yàn)樗鼤?huì)確保條件塊在切換當(dāng)中合適地銷毀與重建條件塊內(nèi)的事件監(jiān)聽器和子組件。

v-if 也是惰性的：如果在初始渲染時(shí)條件為假，則什么也不做——在條件第一次變?yōu)檎鏁r(shí)才開始局部編譯（編譯會(huì)被緩存起來）。

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

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