---
tags: Vue 實戰班
---

# v-if, v-else, v-else-if, v-show

官方文件：https://cn.vuejs.org/guide/essentials/conditional.html#conditional-rendering

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

`v-if` 用於條件的方式渲染一個區塊，當指令的內容回傳為真值時會產生結構內容。

範例重點：

- 當 v-if 的結果為真值時，則會置入該區塊的結構內容
- v-else, v-else-if 則為 v-if 的延伸運用，會延續著 v-if 的結構後方

<iframe height="300" style="width: 100%;" scrolling="no" title="v-if, v-else, v-else-if, v-show-1" src="https://codepen.io/Wcc723/embed/rNEydOb?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/Wcc723/pen/rNEydOb">
v-if, v-else, v-else-if, v-show-1</a> by Casper (<a href="https://codepen.io/Wcc723">@Wcc723</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
## v-show

`v-show` 與 `v-if` 同樣是用來切換物件的呈現，但兩者有很大的差異：

- `v-if` 會完整移除 DOM 元素，使其從 HTML 結構上消失。當使用此方法切換 Vue 元件時，元件的生命週期會重新計算。
- `v-show` 是將物件加上 `display: none`，讓物件從視覺上不可見。

此方法運行結果與上述相同，但元素是套用 `display: none` 作為顯示上的切換。

### `v-if`、`v-show` 怎麼選擇？

- 當元件生命週期需要在顯示時重新計算，則可以使用 `v-if`，如果則否可用 `v-show`。
- 當元件隱藏時，同時需要完整移除 DOM 結構，也可使用 v-if
- v-if 與 v-for 則有另外的衝突問題，會在 v-for 章節詳細說明。

範例重點：

- 請使用開發者工具檢視畫面上的「成功、失敗」區塊，可以發現是使用 `display: none` 的方式隱藏，而不是移除整個 DOM 結構。

<iframe height="300" style="width: 100%;" scrolling="no" title="v-if, v-else, v-else-if, v-show-2" src="https://codepen.io/Wcc723/embed/zYVZWvV?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/Wcc723/pen/zYVZWvV">
v-if, v-else, v-else-if, v-show-2</a> by Casper (<a href="https://codepen.io/Wcc723">@Wcc723</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>