今天是鐵人賽第 10 天，我開始了另一個自我挑戰賽，題目為「三十天學 LodashJS」，也是不知道哪來的勇氣發佈自己寫的糞Code在網路上。我認為要多認識強者才會進步得更快，所以有任何可以改進的地方都歡迎大家留言，大家有空也可以去逛逛我 LodashJS 的學習過程。

Conditional Rendering

Conditional Rendering 就是條件渲染。

這邊介紹 v-if 和 v-show 兩種渲染方式，並補充 v-visible。

v-if, v-else-if, v-else

這個範例就不囉縮一次介紹 v-if, v-else-if, v-else。

<div id="app">
  <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>
</div>

new Vue({
  el: '#app',
  data: {
    type: 'C'
  }
})

附上 fiddle https://jsfiddle.net/hunterliu/6djv4tn8/

v-show

即使 data.ok 值為 false，仍會渲染只是透過 CSS display: none;隱藏。

<div id="app">
 <h1 v-show="ok">Hello Vue!</h1>
</div>

new Vue({
  el: '#app',
  data: {
    ok: true
  }
})

附上 fiddle https://jsfiddle.net/hunterliu/12dj0qwk/1/

v-if vs v-show

v-if 是真正的條件渲染，因為它會確保在切換過程中事件監聽器和子組件適當地被銷毀和重建。
v-if 也是惰性的：如果在初始渲染時條件為 false，則什麼也不做——直到條件第一次變為真時，才會開始渲染。

v-show 則只是簡單的切換 CSS display:none。

簡單來說，如果需要非常頻繁地切換，則使用 v-show；如果在運行時條件很少改變，則使用 v-if 。

補充：

vue-visible 則是切換 CSS visibility: hidden。

請看 w3schools display and visibility

但是使用 vue-visible 許額外引入：

import VueVisible from 'vue-visible';
Vue.use(VueVisible);

範例：

附上 fiddle https://jsfiddle.net/fcpc6utm/