# Vue.js 學習旅程Mile 12 – Conditional Rendering 條件渲染篇：v-if、v-show
###### tags: `w3HexSchool` `Vue` `Javascript`

## v-if
設定 `v-if` 的元素只會在其 Value 為 Truthy 時被渲染。

<div id="app">
  <span v-if="isA">A</span>
</div>

var vm = new Vue({
  el: '#app',
  data: {
    isA: true
  }
});

當 isA 為 true 時，\<span>A</span\> 會出現在畫面上，但當 isA 為 false 時，\<span>A</span\> 整個 DOM 會不存在於 HTML 內。

### v-else、v-else-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>C</div>
</div>

var vm = new Vue({
  el: '#app',
  data: {
    type: "B"
  }
});

#### 注意事項

* `v-else` 沒有 Value ，它是一個單純的 Directive。
* `v-else-if` 可以使用多次。
* `v-else-if` 跟 `v-else` 相同必須緊跟在 `v-if` 或是 `v-else-if` 設置元素之後，而且必須是同一層的元素。

### 使用 template 包裹多層元素
因為 `v-if` 只能使用在一個元素上，所以當需要多個元素做切換時，可以使用 `<template>` 這個標籤把多個元素包裹起來。

`<template>` 標籤只做包裹元素之用，實際被渲染出來時，並不存在，因此不影響原本網頁元素的配置。

<span v-if="isA">A1</span>
<span v-if="isA">A2</span>
<span v-if="isA">A3</span>

等同於下例

<template v-if="isA">
  <span>A1</span>
  <span>A2</span>
	<span>A3</span>
</template>

### 使用 key 決定可重覆使用的元素
Vue 會儘可能高效地渲染元素。如果是相同的結構則會繼續沿用原本的 DOM 元素，並不會重新渲染，用這個方法減少重新渲染所需的資源以提高效能。

<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` attribute 即可：

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

## v-show
`v-show` 跟 `v-if` 在頁面上的效果相同，都是決定元素是否顯示，但其渲染的方式不同。

* `v-if` : 真正的建立及銷毀元素。
* `v-show` : 元素始終會被渲染並保留在 DOM 中，只是使用 `display` 的樣式屬性切換顯示效果。

<span v-show="isA">A</span>

等同於下例：

<span style="display: none;">A</span>

#### 注意事項

* `v-show` 不支持 `<template>` 元素，也不支持 `v-else`。

## v-if vs v-show

比較兩者在渲染時所需消耗的資源與效能：

* 在初始渲染時，有元素其值為 false ：`v-show` > `v-if`
* 若需頻繁切換元素狀態：`v-if` > `v-show`

## 參考資料
* [Vue.js - Conditional Rendering](https://vuejs.org/v2/guide/conditional.html)
* [Vue.js: 條件渲染 v-if、v-show](https://cythilya.github.io/2017/04/22/vue-conditional-rendering/)
* [Vue.js Core 30天屠龍記(第12天): 條件渲染](https://ithelp.ithome.com.tw/articles/10205764)