Vue 條件渲染

條件渲染

v-if

在字符串模板中，如 Handlebars，咱們得像這樣寫一個條件塊：

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

在 Vue.js，咱們使用 v-if 指令實現一樣的功能：

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

也能夠用 v-else 添加一個 「else」 塊：

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

template v-if

由於 v-if 是一個指令，須要將它添加到一個元素上。可是若是咱們想切換多個元素呢？此時咱們能夠把一個 <template> 元素當作包裝元素，並在上面使用 v-if，最終的渲染結果不會包含它。

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

v-show

另外一個根據條件展現元素的選項是 v-show 指令。用法大致上同樣：

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

不一樣的是有 v-show 的元素會始終渲染並保持在 DOM 中。v-show 是簡單的切換元素的 CSS 屬性 display。

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

v-else

能夠用 v-else 指令給 v-if 或 v-show 添加一個 「else 塊」：

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

v-else 元素必須當即跟在 v-if 或 v-show 元素的後面——不然它不能被識別。

v-if vs. v-show

在切換 v-if 塊時，Vue.js 有一個局部編譯/卸載過程，由於 v-if 之中的模板也可能包括數據綁定或子組件。v-if 是真實的條件渲染，由於它會確保條件塊在切換當中合適地銷燬與重建條件塊內的事件監聽器和子組件。

v-if 也是惰性的：若是在初始渲染時條件爲假，則什麼也不作——在條件第一次變爲真時纔開始局部編譯（編譯會被緩存起來）。

相比之下，v-show 簡單得多——元素始終被編譯並保留，只是簡單地基於 CSS 切換。

通常來講，v-if 有更高的切換消耗而 v-show 有更高的初始渲染消耗。所以，若是須要頻繁切換 v-show 較好，若是在運行時條件不大可能改變 v-if 較好。