# 🏅 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 / 答案 |
|:----------------:|:-------------------------------------------------------------------:|
| Michael | [CodePen](https://codepen.io/RenHuang-Huang/pen/qBzYjKq) |
| Eric0823 | [CodePen](https://codepen.io/a7901477/pen/rNEyqEo) |
| anderson666 | [CodePen](https://codepen.io/goodmanbuild/pen/YzoZRPq) |
| Hilda | [CodePen](https://codepen.io/vwquikad-the-vuer/pen/XWLMyrG) |
| 末次 | [CodePen](https://codepen.io/yunjulee/pen/poXeQvZ) |
| chichi | [CodePen](https://codepen.io/chichihuang/pen/BagWGNd) |
| Mars | [CodePen](https://codepen.io/MarsKuo/pen/ExBWOKq) |
| mu mu | [CodePen](https://codepen.io/ishuki916/pen/BagWGLm) |
|HsienLu|[CodePen](https://codepen.io/Hsienlu/pen/JjQWeEd)|
| Aden |[CodePen](https://codepen.io/Osases/pen/RwzpqVp)|
| Charis_Lai | [CodePen](https://codepen.io/charislai/pen/VwJpVzm) |
| ABOOS | [CodePen](https://codepen.io/guhungyin/pen/gONmQVK) |
| 阿B | [CodePen](https://codepen.io/Abby-Chou/pen/bGPqOdz) |
| Ariel | [CodePen](https://codepen.io/ariel0510/pen/abgJPNp) |
| cherylxie | [CodePen](https://codepen.io/fi7933201/pen/KKjWJzW) |
| 小葉 | [CodePen](https://codepen.io/rsosijvr-the-flexboxer/pen/wvLJNqz) |
| Tatsu | [CodePen](https://codepen.io/chindesu0207/pen/oNrZmaK) |
| imsmallnew | [Codepen](https://codepen.io/imsmallnew/pen/ZEdePLP) |
| 皮克 | [Codepen](https://codepen.io/yen-kg/pen/xxNWEXE) |
| Barry1104 | [Codepen](https://codepen.io/barry1104/pen/mdZWYdY) |
| 睿睿 | [CodePen](https://codepen.io/uwmrsusb-the-solid/pen/qBzrGVg) |
| Zhu | [CodePen](https://codepen.io/codepenplayer/pen/abgJXYP) |
| Jay | [CodePen](https://codepen.io/yeeyaha-jay/pen/rNEyELR) |
| rjjq | [CodePen](https://codepen.io/rjjq/pen/KKjmPKN) |
| YO | [CodePen](https://codepen.io/Y-1717/pen/qBzmWWy) |
| Shin | [CodePen](https://codepen.io/shin9626/pen/OJemLMP) |
| 好了啦 | [CodePen](https://codepen.io/j-z-the-flexboxer/pen/zYVwOoj) |
| KK | [CodePen](https://reurl.cc/zDWdey) |
| Tough life | [CodePen](https://codepen.io/hakuei0115/pen/zYVwxOr) |
| Kevin Wei | [CodePen](https://codepen.io/kevin21305991/pen/mdZmJpy)|
| 貢波波夫 | [CodePen](https://codepen.io/mxgrfgcr-the-bashful/pen/XWLRXZp)|
| Tanyaaaa | [CodePen](https://codepen.io/tanya77777/pen/YzoVGav) |
| zaoannihao | [Codepen](https://codepen.io/ckhwdvrx-the-solid/pen/ExBmZqP) |
| 蛋黃 |[Codepen](https://codepen.io/yiyun12o9/pen/poXPPrw)|
| Rumi |[Codepen](https://codepen.io/Tzuru-Chen/pen/PormmOq)|
| anthy7154 |[Codepen](https://codepen.io/hnhmgzbw-the-sans/pen/qBzmmMv)|
| SKey |[Codepen](https://codepen.io/Dale-Chien/pen/KKjmyRG)|
| Mina |[Codepen](https://codepen.io/yanling-99/pen/PormEqa)|
| willy0719 |[Codepen](https://codepen.io/DOBEST/pen/dyBWmOo)|
| Abby | [CodePen](https://codepen.io/abby1125/pen/ZEdKoeG) |
| ling | [CodePen](https://codepen.io/yen-kg/pen/xxNWEXE) |
| dodo | [CodePen](https://codepen.io/MissDouble/pen/wvLdjbV) |
|阿鵝|[CodePen](https://codepen.io/noracami/pen/LYKyqGr)|
| Mika | [Codepen](https://codepen.io/mikac_tw/pen/BagREoP)|
| duchi |[Codepen](https://codepen.io/sqaz0502/pen/VwJbOOo)|
| zhen |[Codepen](https://codepen.io/yunnnz/pen/poXPKwe)|
| Dolce_墨 | [CodePen](https://codepen.io/DolceTseng1026/pen/MWMobbJ) |
| Steven1220 | [CodePen](https://codepen.io/Steven1220/pen/abgwWPj) |
| ya_meow |[Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/LYKLzVQ)|
| JC |[Codepen](https://codepen.io/jy_123/pen/zYVzRqz)|
| kuolun |[Codepen](https://codepen.io/kuolun/pen/rNEwQwq)|
| sandra191919 |[Codepen](https://codepen.io/a0960529965/pen/dyBRrxM)|
| Renee |[Codepen](https://codepen.io/renee_wu/pen/XWLgLww)|
| Yuwen |[Codepen](https://codepen.io/Yuwen-the-reactor/pen/QWXMEKv)
| Fabio20 | [CodePen](https://codepen.io/fabio7621/pen/zYVdMLM) |
| Chieh | [CodePen](https://codepen.io/Chieh_/pen/abgyXrq) |
| 咖咖 | [CodePen](https://codepen.io/gon790219/pen/rNEzgmM) |
| floya9733 | [CodePen](https://codepen.io/TZU68/pen/oNrGYZG) |
| jacky | [CodePen](https://codepen.io/yen-kg/pen/xxNWEXE) |
| World | [CodePen](https://codepen.io/HexschoolVuePujols/pen/gONGGvQ) |
| 小趴 | [Codepen](https://codepen.io/papa2415/pen/WNqZaXB)|
| Letitia | [Codepen](https://codepen.io/letitia-chiu/pen/mdZBZqN) |
| Rowan | [Codepen](https://codepen.io/dxnqcnen/pen/ZEdavbo) |
| Danny | [Codepen](https://codepen.io/danny666/pen/VwJrdzW) |
| Peter | [Codepen](https://codepen.io/peterhsj/pen/dyBJVgR) |
| Triple | [CodePen](https://codepen.io/riku30/pen/PorELzx) |
| m.m | [CodePen](https://codepen.io/meggie-liu/pen/KKjQpXG) |
| cami | [CodePen](https://codepen.io/irisLife/pen/dyBdvoQ) |
| Erin | [CodePen](https://codepen.io/erin-feng/pen/rNEdPdo) |
| Zoe | [CodePen](https://codepen.io/roanne-rou/pen/LYKmvpj) |
| Ching | [CodePen](https://codepen.io/huangching/pen/RwzvKxY) |
| Eden |[Codepen](https://codepen.io/iseden/pen/dyxGyjz)|
| 叮咚 |[Codepen](https://codepen.io/yen-kg/pen/xxNWEXE)|

<!--
| user | [CodePen]() |
-->