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

可以用

v-else

指令給

v-if

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

v-else

元素必須緊跟在

v-if

元素或者

v-else-if

的後面——否則它不能被識别。

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

相似,，

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

。

自己動手試一試,輸入一些文本，然後點選「Toggle login type」進行切換

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

注意,

<label>

元素仍然會被複用，因為沒有被添加了

key

屬性。

v-show

另一個根據條件展示元素的選項是

v-show

指令。用法大體上一樣：

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

不同的是有

v-show

的元素會始終渲染并保持在 DOM 中。

v-show

是簡單的切換元素的 CSS 屬性

display

注意

v-show

不支援

<template>

文法。

v-if vs v-show

v-if

是真實的條件渲染，因為它會確定條件塊在切換當中适當地銷毀與重建條件塊内的事件監聽器和子元件。

v-if

也是惰性的：如果在初始渲染時條件為假，則什麼也不做——在條件第一次變為真時才開始局部編譯（編譯會被緩存起來）。

相比之下，

v-show

簡單得多——元素始終被編譯并保留，隻是簡單地基于 CSS 切換。

一般來說，

v-if

有更高的切換消耗而

v-show

有更高的初始渲染消耗。是以，如果需要頻繁切換使用

v-show

較好，如果在運作時條件不大可能改變則使用

v-if

較好。

原文：http://vuejs.org/guide/conditional.html

vue條件渲染