v-show

轉自：https://cn.vuejs.org/v2/api/#v-show

預期：any
用法：

• 根據表示式之真假值，切換元素的display CSS屬性。
• 當條件變化時該指令觸發過渡效果。

v-if

預期：any
用法：
根據表示式的值的真假條件渲染元素。在切換時元素及它的資料繫結/元件被銷燬並重建。如果元素是<template>，將提出它的內容作為條件塊。

當條件變化時該指令觸發過渡效果。

當和v-if一起使用時，v-for的優先順序比v-if更高。詳見列表渲染教程

參考：條件渲染 - v-if

v-else

不需要表示式
限制：前一兄弟元素必須有v-if或v-else-if。
用法：
為v-if或者v-else-if新增“else塊”。

<div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div>

參考：條件渲染 - v-else

v-else-if

2.1.0新增

型別：any
限制：前一兄弟元素必須有v-if或v-else-if。
用法：
表示v-if的“else if塊”。可以鏈式呼叫。

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

條件渲染

v-if

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

<!-- Handlebars 模板 -->
 

{{#if ok}}
  <h1>Yes</h1>
{{/if}}

在Vue中，我們使用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>元素

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

v-else

你可以使用v-else指令來表示v-if的“else塊”：

<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塊”，可以連續使用：

<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變得非常快之外，還有其它一些好處。例如，如果你允許使用者在不同的方式之間切換：

<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屬性即可：

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

現在，每次切換時，輸入框都將被重新渲染。
注意，<label>元素仍然會被高效地複用，因為它們沒有新增key屬性

v-show

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

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

不同的是帶有v-show的元素始終會被渲染並保留在DOM中。v-show只是簡單地切換元素的CSS屬性display。

注意，v-show不支援<template>元素，也不支援v-else。

v-if vs v-show

v-if是“真正”的條件渲染，因為它會確保在切換過程中條件塊內的事件監聽器和子元件適當地被銷燬和重建。

v-if也是惰性的：如果在初始渲染時條件為假，則什麼也不做 – 直到條件第一次變為真時，才會開始渲染條件塊。

一般來說，v-if有更高的切換開銷，而v-show有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用v-show較好；如果在執行時條件很少改變，則使用v-if較好。

v-if 與 v-for 一起使用

不推薦同時使用v-if和v-for。請查閱風格指南以獲取更多資訊。
當v-if與v-for一起使用時，v-for具有比v-if更高的優先順序。請查閱列表渲染指南以獲取詳細資訊。