條件渲染

今天來介紹 v-if 和 v-show，並比較兩者之間的差異。

v-if

如果希望某些區塊在特定條件下才出現，就可以使用 v-if 、 v-else-if、 v-else，我們直接來看下面的範例：

<div id="app">
    <p v-if="isShow">這裡是一段文字</p>
</div>

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

上面的段落在加上 v-if 之後，會根據 isShow 的值來決定是否要出現，如果為 true 就會出現， false 則否。
下面的範例，則是再加上 v-else，當點擊按鈕時則會交替該出現的文字段落。

<div id="app">
  <p v-if="isShow">這裡是一段文字</p>
  <p v-else>這裡是另一段文字</p>
  <button @click="isShow = !isShow">Toggle</button>
</div>

而下面的範例則是再加上 v-else-if ，來判斷不只兩種情況下，該出現的區塊為何。

<div id="app">
  <p v-if="isShow == 'A'">這裡是一段 A 文字</p>
  <p v-else-if="isShow == 'B'">這裡是一段 B 文字</p>
  <p v-else>這裡是一段 C 文字</p>
  <button @click="isShow = 'A'">Show A</button>
  <button @click="isShow = 'B'">Show B</button>
  <button @click="isShow = 'C'">Show C</button>
</div>

這裡需要特別注意到的是 v-else 必須緊跟在 v-if 或是 v-else-if 之後，否則將無法正確被識別。

v-show

v-show 的使用方法其實跟 v-if 大同小異，都是根據後面的值來決定是否要出現。

<div id="app">
  <p v-show="isShow">這裡是一段文字</p>
  <button @click="isShow = !isShow">Toggle</button>
</div>

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

v-if 與 v-show 的差異

v-show 並沒有像 v-else 或是 v-else-if 的狀況，所以只能依照 true 或 false 兩種情形來顯示區塊，v-if 和 v-show 在結果上是一樣的。
但是就細節來說，還是有些微不同， v-if 若是為 false 則該區塊的 HTML 標籤是不會生成的，而 v-show 則是利用 CSS 中的 display 屬性來切換是否要顯示該區塊，若為 false 則 diplay 屬性的值為 none 。

那麼，明天再見囉！