---
tags: Vue 直播班 - 2022 春季班
---

# 🏅 Day 24
###### tags: `Vue 直播班 - 2022 春季班`

題目 (請將答案貼上 CodePen)
---
請操作 [這個模板](https://codepen.io/znlcgmgk/pen/rNjozqB?editors=1011) (只能操作 HTML 的部分)，使用 v-if, v-else-if 的觀念撰寫答案。
> 點擊「小明」按鈕會顯示區塊一，點擊「漂亮阿姨」按鈕會顯示區塊二。同一時間在畫面上只能顯示區塊一、區塊二其中一個。

回報流程
---
請同學依照下圖教學觀看解答、回報答案:


回報格式如下圖，請在「回報區」使用註解回報答案 (為了統計人數，請同學依序加上「報數」)


<!-- 解答
<div id="app">
<div class="container mt-3">
<button type="button" class="me-3" @click="current = '小明'">小明</button>
<button type="button" @click="current = '漂亮阿姨'">漂亮阿姨</button>
<div v-if="current === '小明'">
此區塊屬於 小明
</div>
<div v-else-if="current === '漂亮阿姨'">
此區塊屬於 漂亮阿姨
</div>
</div>
</div>
-->

回報區
---
| 報數 |組別/名字 | codepen / 其他回饋 |
|:--------:| -------- | -------- |
|1|CloThEs | https://codepen.io/bogwdnxx-the-sans/pen/WNXbXJw|
|2| Iris Huang | https://codepen.io/ythuang/pen/MWOYOZv |
|3| kevinhes| https://codepen.io/kevinhes/pen/GROgOPK?editors=1011|
|4| Larry | https://codepen.io/larrylinr5/pen/abVzVXj |
|5| YC | https://codepen.io/YCLu/pen/xxPbPma |
|6|Evan|https://codepen.io/Evan_9837/pen/QWOwOzG|
|7|Jason Chen|https://codepen.io/jason60810/pen/podvdmr |
|8|Aaron Tu|https://codepen.io/aarontu/pen/zYPxPXa|
|9|Benson|https://codepen.io/soul81624/pen/abVzEZP|
|10|黑川|https://codepen.io/kurokawa/pen/MWOYreV|
|11|Howard|https://codepen.io/yawdnhbm/pen/NWwPXpg|
|12|Himi|https://codepen.io/Himi/pen/VwrYymw|
|13| Kelvin Hsu | https://codepen.io/kelvin001/pen/YzEPYdW?editors=1010 |
|14| Wenfish | https://codepen.io/wenfisht/pen/gOXboGL |
|15| 4/Empty Wu |https://codepen.io/emptywu/pen/eYemybX |
|16|Liu| https://codepen.io/feng-chi-liu/pen/QWOwaXB?editors=1111 |
|17|POPEYE |https://codepen.io/popeye_ux/pen/vYWEpby|
|18|kk|https://codepen.io/potatokaka/pen/MWOYQwR?editors=1011|
|19|威爾|https://codepen.io/WILL_Wu/pen/OJOPQNv|
|20|阿劍| https://codepen.io/seonkuraito/pen/dyVaMxZ |
|21|Elaine Liu|https://codepen.io/elaine7598/pen/ExbaQgj|
|22|Gill|https://codepen.io/Gill-Chin/pen/PoOwQpR|
|23| Karen Huang | https://codepen.io/Coding_Snorlax/pen/jOaEZYR |
|24| Bella Shya | https://codepen.io/BellaXie/pen/OJOPQdr?editors=1010 |
|25| AllenW | https://codepen.io/AllenW/pen/oNogEye |
|26| 肉鬆 | https://codepen.io/klrkicog/pen/RwjNMKE?editors=1010 |
|27|有廖先生(Rain)|https://codepen.io/billpop741/pen/GROgQRv|
|28|tingyu| https://codepen.io/dgltu/pen/zYPxWLR |
|29|Jasper|https://codepen.io/li-jasper/pen/QWOwryg |
|30|陳暐中|https://codepen.io/wei-z/pen/OJOPZjW?editors=1011 |
|31|Charlotte Lee|https://codepen.io/charlotte-lee/pen/MWOYGbV |
|32|小K|https://codepen.io/kelen1995/pen/podvVWL|
|33|Tim Lin|https://codepen.io/TimmyLin/pen/abVzGwM|
|34| 黃士桓 | https://codepen.io/shr-huan-huang/pen/KKywRRR?editors=1010 |
|35|Yunei|https://codepen.io/Yunei/pen/JjOovmP|
|36|Sheep| https://codepen.io/SheepNDW/pen/JjOovej |
|37|Bruno Yu| https://codepen.io/bruno-yu/pen/yLPyjQR?editors=1010|
|38|dOvOb|https://codepen.io/gezzgrwj-the-styleful/pen/vYWErGm|
|39|群嘉|https://codepen.io/efzdamnp-the-lessful/pen/PoOwaaB?editors=1011|
|40|andersonshen| https://codepen.io/luxyenni-the-bold/pen/rNYaKoe |
|41|PeiChi|https://codepen.io/pei-chi-tsai/pen/xxPbJdp?editors=1011|
|42|Henry Wu|https://codepen.io/dkcmlaww-the-flexboxer/pen/QWOwBQN?editors=1011 |
|43|Scottie|https://codepen.io/wow767t/pen/XWzJBEz?editors=1011|
|44|Terry21|https://codepen.io/feng0409/pen/podvOdL?editors=1010 |
|45|shio|https://codepen.io/shioyen/pen/jOaEQeV?editors=1011 |
|46|Fleur|https://codepen.io/swwlee/pen/mdqyQMo |
|47|Rick Tzeng|https://codepen.io/rick917jp6/pen/YzEPdrX
|48|Judy☻|https://xn--codepen-1c7d.io/hsiaohan/pen/zYPxyJX?editors=1011 |
|49|咖咖|https://codepen.io/gon790219/pen/RwjNEmK |
|50|DDDDK|https://codepen.io/dkklee/pen/XWzbrmv |
|51|Arista|https://codepen.io/arista-hsieh/pen/bGYdRdJ |
|52|Steven Chan|https://codepen.io/Steven1220/pen/QWObgje?editors=1011 |
|53|卡丘| https://codepen.io/OneKwei/pen/MWOwOWw |
|54|Henry| https://codepen.io/kaohenry9287/pen/eYeNeGB |
|55|Yummyniya|https://codepen.io/yummyniya/pen/zYPvZOE|
| 56 | Sihle Huang | https://codepen.io/bugbug777/pen/jOabwWo |
|57|AKI|https://codepen.io/akichen27/pen/yLPYzXR |
|58|mei|https://codepen.io/Shila-Chen/pen/yLPYrag |
|59|JD孟璁|https://codepen.io/oikdkmxq-the-looper/pen/MWOyQVV?editors=1011 |
|60|柴貓|https://codepen.io/shibacat/pen/podbvRo |
|61|我是泇吟|https://codepen.io/kljuqbxs/pen/wvPWqYL|
|62|FuChang|https://codepen.io/fuchang830714/pen/RwjWamj|
|63|阿武|https://codepen.io/samwnkyat/pen/GROjpQr?editors=1010|
|64|Otis| https://codepen.io/humming74/pen/oNoYWOQ?editors=1011 |
|65|Calon|https://codepen.io/Calon0118/pen/eYeBrNx|
|66|Jordan Tseng|https://codepen.io/jordan-ttc-design/pen/WNXoVwz?editors=1010|
|67|ZY Hsu|https://codepen.io/zihyin/pen/ExbWbmb?editors=1011|
|68|Bonnie|https://codepen.io/bonnieli1414/pen/yLPMwQb?editors=1011|
|69|肉桂卷|https://codepen.io/ginnlee/pen/jOawNdJ?editors=1011|
|70|Hedy|https://codepen.io/hhhsuan41/pen/rNYdJme?editors=1011|
|71|Gui|https://codepen.io/guitimliu/pen/qBVMYMJ|
|72| Mylène | https://codepen.io/hamajibashi/pen/abVPBBq |
|73|紙飛機| https://codepen.io/paperplanea/pen/YzEgoOm |
|74|大衛| https://codepen.io/exnsrpjc/pen/WNdOXpo?editors=1011 |
|75|Carol Li|https://codepen.io/carolli834/pen/MWVNwyz?editors=1011|