# 🏅 Day5 - Vue.js 的基礎魔法：v-if、v-else

## 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="Composition API：v-for 範例 (3)" src="https://codepen.io/yen-kg/embed/NWVYrQz?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/yen-kg/pen/NWVYrQz">
Composition API：v-for 範例 (3)</a> by Yen Kg (<a href="https://codepen.io/yen-kg">@yen-kg</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="Composition API：v-if, v-else, v-else-if, v-show 範例 (2)" src="https://codepen.io/yen-kg/embed/rNgdMBE?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/yen-kg/pen/rNgdMBE">
Composition API：v-if, v-else, v-else-if, v-show 範例 (2)</a> by Yen Kg (<a href="https://codepen.io/yen-kg">@yen-kg</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

題目
---
操作 [這個模板](https://codepen.io/yen-kg/pen/xxNWEXE)，執行以下要求（只能操作 HTML 的部分）：

* 請使用 v-if 找出價錢大於 25 元的水果，渲染資料如下圖：


## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）


<!-- 解答：
<template>
<div id="app" class="container">
<div class="row">
<template v-for="(fruit, index) in fruitData" :key="index">
<div v-if="fruit.price > 25" class="col-md-6 mb-3">
<div class="card" style="width: 100%;">
<div class="card-body">
<h5 class="card-title">水果名稱：{{ fruit.title }}</h5>
<p class="card-text my-2">價錢：{{ fruit.price }}</p>
<p class="card-text mb-3">數量：{{ fruit.count }}</p>
<a href="#" class="btn btn-primary">加入購物車</a>
</div>
</div>
</div>
</template>
</div>
</div>
</template>
-->

回報區
---

| # | Discord | CodePen / 答案 |
|:---:|:---------- |:------------------------------------------------------------ |
| 01 | thchen2002 | [ CodePen ](https://codepen.io/thchen2002/pen/gbaRGdw) |
| 02 | RUDY | [CodePen](https://codepen.io/Rudy-crw/pen/qEOjPvW) |
| 03 | 登登登 | [CodePen](https://codepen.io/Duncanin/pen/azvwVmb) |
| 04 | han | [CodePen](https://codepen.io/iamHanCheng/pen/pvjwdNQ) |
| 05 | dPi | [CodePen](https://codepen.io/snijqlte-the-bold/pen/LEpLexe) |
| 06 | 小羊 | [CodePen](https://codepen.io/allen9630308/pen/qEOjpXp) |
| 07 | kat | [CodePen](https://codepen.io/Nek0u0/pen/ByoZJJg) |
| 08 | DaRon | [CodePen](https://codepen.io/daron0811/pen/vENZpqM) |
| 09 | poyi | [CodePen](https://codepen.io/poyi-the-flexboxer/pen/myewpYY) |
| 10 | Gui | [CodePen](https://codepen.io/guitimliu/pen/LEpLQYX) |
| 11 | yu005620 | [CodePen](https://codepen.io/yu-chin-chiang/pen/Qwjgmjr) |
| 12 | dean | [CodePen](https://codepen.io/ch933114/pen/jEbwzRo) |
| 13 | 地瓜 | [CodePen](https://codepen.io/huangtzuchin/pen/KwdqRxz) |
| 14 | ya_meow | [Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/LYKLzVQ)|
| 15 | wanghuaiying | [Codepen](https://codepen.io/huaiying/pen/WbQOKEK)|
| 16 | Loder | [Codepen](https://codepen.io/rgbkomhs-the-flexboxer/pen/bNVROJd)|
| 17 | Lin | [Codepen](https://codepen.io/Lin4611/pen/XJmgGKw)|
| 18 | wei_0982 | [Codepen](https://codepen.io/nico-lai/pen/GgpEVYe)|
| 19 | Clove_墨 | [Codepen](https://codepen.io/CloveTseng1026/pen/wBKqvjj)|
| 20 | 阿鵝 | [Codepen](https://codepen.io/noracami/pen/pvjroGB)|
| 21 | haohaoliao |[CodePen](https://codepen.io/yuyuyuhaohao/pen/zxvdvGb) |
| 22 | 地呱 | [Codepen](https://codepen.io/LHung/pen/VYvzjdP) |
| 23 | Sam | [Codepen](https://codepen.io/Sammy-the-styleful/pen/XJmaNmz) |
| 24 |7lun| [CodePen](https://codepen.io/mfyvqhsn-the-bold/pen/pvjrNyR) |
| 25 | Candace | [CodePen](https://codepen.io/Candace802/pen/ogjeBrZ) |
| 26 | William Hsieh | [CodePen](https://codepen.io/lsaimqxa-the-vuer/pen/YPyxYOv) |
| 27 | Hugh | [CodePen](https://codepen.io/Hugh-Chen/pen/jEbLZOq) |
| 28 | 牙山 | [CodePen](https://codepen.io/Tzuru-Chen/pen/wBKqjYb) |
| 29 | 阿Kai | [CodePen](https://codepen.io/kaihuang3013/pen/VYvzEeV) |
| 30 | Rexlin | [CodePen](https://codepen.io/Rexlin595/pen/qEOXgYQ) |
| 31 | jimmy | [CodePen](https://codepen.io/JimmyMao/pen/NPGvJra) |
| 32 | David0799 | [CodePen](https://codepen.io/David0799/pen/XJmMqde) |
| 33 | 阿昌 | [CodePen](https://codepen.io/ychleo102615/pen/dPYzLXR) |
| 34 | Allen_Lin | [CodePen](https://codepen.io/lcf7891/pen/ZYbJZbz) |
| 35 | Sam.S.T.Y | [CodePen](https://codepen.io/Sam-Yang-the-animator/pen/QwjMRgE) |
| 36 | yi | [CodePen](https://codepen.io/5-1/pen/EaVwaQN) |
| 37 | rio_wei | [CodePen](https://codepen.io/wei_wu/pen/azvLLEY) |
| 38 | 黛西 | [CodePen](https://codepen.io/ChiashengLin/pen/MYaEdLo) |
| 39 | Momoze | [CodePen](https://codepen.io/mleczmam-the-typescripter/pen/xbwPRoJ) |
| 40 | 禹成林 | [CodePen](https://codepen.io/useirin/pen/jEbYyeL) |
| 41 | 肉桂卷 | [CodePen](https://codepen.io/ginnlee/pen/VYvyQyQ) |
| 42 | 邵 |[CodePen](https://codepen.io/ukscrlno-the-typescripter/pen/XJmZbVd)|
| 43 | 叮咚 |[CodePen](https://codepen.io/pinchieh-lin/pen/azvGoyb)|
| 44 | 白雪 |[CodePen](https://codepen.io/weiwei032835-the-styleful/pen/jEbxaoW)|
| 45 | Chen |[CodePen](https://codepen.io/JGM-C/pen/yyYEXZN)|
| 46 | ScarT | [CodePen](https://codepen.io/Acadia/pen/WbQKwLd) |
| 47 | Toung | [Codepen](https://codepen.io/Toung/pen/empLKNR) |
| 48 | Rogan | [Codepen](https://codepen.io/RoganHsu/pen/WbreozG) |
<!--
| 00 | user | [CodePen]() |
-->