---
tags: Vue 直播班 - 2022 冬季班
---
# 🏅 Day 24 - v-else-if

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

## 回報流程

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


<!-- 解答：
<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>
-->

回報區
---

| Discord | CodePen / 答案 |
|:-------------:|:----------------------------------------------------------------:|
|Wendy3#5615|[Codepen](https://codepen.io/wendy03/pen/zYLwPVM)|
|LinaChen#1796|[Codepen](https://codepen.io/LinaChen/pen/zYLwpOy)|
|albee#9121|[Codepen](https://codepen.io/albee-chang/pen/mdjWLQp)|
|YC#2522|[CodePen](https://codepen.io/YCLu/pen/wvxgjOO)|
|hannahtw#2224|[CodePen](https://codepen.io/hangineer/pen/BaPRmXp?editors=1010)|
|JackC#0411|[Codepen](https://codepen.io/key0329/pen/NWBjwQg)|
|楊苡安#2752|[Codepen](https://codepen.io/yi-an-yang/pen/GRBmygq)|
|ChloeLo#4858|[Codepen](https://codepen.io/chloelo/pen/eYjWymP)|
|AuroraC#6539|[codepen](https://codepen.io/AuroraC/pen/ZEjKvbM?editors=1011)|
|柔柔#1716|[Codepen](https://codepen.io/rouchen/pen/MWBmraB?editors=1010)|
|阿榮#8277|[CodePen](https://codepen.io/mogzbvfl-the-reactor/pen/bGjWaEr)|
|ViNci#4273|[CodePen](https://codepen.io/ViNciSyo/pen/VwBbyLL)|
|yuyu#6310|[CodePen](https://codepen.io/yuyu0905/pen/GRBmyJj?editors=1011)|
|黑白兔#0684|[CodePen](https://codepen.io/johnny329/pen/vYampOL)|
|Jill Lee#0809|[CodePen](https://codepen.io/chi-ling-lee/pen/YzjVYZq?editors=1011)|
|AKI|[codepen](https://codepen.io/aki168/pen/BaPNYOE)|
|kenki100#0068|[Codepen](https://codepen.io/ken100/pen/abjWEpg)|
|大頭#8116|[codepen](https://codepen.io/d22495521/pen/abjWEWe?editors=1011)|
|Chi#7605|[Codepen](https://codepen.io/YoChi84/pen/BaPRJZw)|
|popeye#5081|[codepen](https://codepen.io/popeye_ux/pen/YzjVYXy)|
|Alex#9978|[codepen](https://codepen.io/datsxzqg-the-selector/pen/mdjmpKw?editors=1011)|
|泊岸#3466|[codepen](https://codepen.io/qoq77416416/pen/RwBVxJV?editors=1011)|
|Kimi#9564|[CodePen](https://codepen.io/kimihu91/pen/xxJwjGm)|
|冬天#5215|[CodePen](https://codepen.io/winter_/pen/oNMWpaz)|
|威0#6919|[codepen](https://codepen.io/n0918679182/pen/qBympmE?editors=1011)|
|威爾#1694|[CodePen](https://codepen.io/WILL_Wu/pen/QWBvaVV)|
|LHchien33#6232|[CodePen](https://codepen.io/lin_chien/pen/BaPRJGr)|
|Benson#6763|[Codepen](https://codepen.io/kumashow/pen/xxJdpmw)|
|mandylai#4055|[Codepen](https://codepen.io/mandy-lai-2/pen/zYLwpbx)|
|PayRoom#8328|[CodePen](https://codepen.io/water38198/pen/vYampoJ)
|大衛#4869|[CodePen](https://codepen.io/exnsrpjc/pen/YzjVYjN?editors=1011)|
|Tami#6742|[CodePen](https://codepen.io/wqsdqbjn-the-vuer/pen/poZPpXB)|
|int#7518|[Codepen](https://codepen.io/intHuang/pen/LYByQpW?editors=1011)|
|圈圈#4060|[Codepen](https://codepen.io/wjejfczn-the-bold/pen/MWBmQjW?editors=1010)|
|jacky010080#0880|[CodePen](https://codepen.io/Yen-Jung-Chen/pen/bGjWLBz?editors=1011)|
|PeihanWang#2530|[Codepen](https://codepen.io/PeihanWang/pen/mdjmXRL?editors=1011)|
|RainJ#3480|[Codepen](https://codepen.io/RainJCode/pen/ZEjKrrW)|
|無名#6427|[Codepen](https://codepen.io/Nomoney/pen/rNrjKmw)|
|Wendy77#8049|[Codepen](https://codepen.io/Wendy__/pen/jOpmZYN)|
|阿鑫#4346|[CodePen](https://codepen.io/Neil1024/pen/rNrmdVz?editors=1011)|
|小木馬#8760|[CodePen](https://codepen.io/wmmtbcsd/pen/GRBmxQR?editors=1011)|
|Cheryl#4007|[Codepen](https://codepen.io/Cheryl-Hsu/pen/LYBydeM?editors=1011)|
|Rena#6249|[Codepen](https://codepen.io/aureate0116/pen/wvxdmNo)|
|出事了阿伯#9923|[Codepen](https://codepen.io/BradpittLai/pen/QWBvmoM?editors=1010)|
|阿異#4776|[CodePen](https://codepen.io/yani21399/pen/WNKjzqE)|
|azami#5986|[Codepen](https://codepen.io/azami/pen/rNrmdgZ)|
|Ruby Chen#7452|[Codepen](https://codepen.io/ruby92429/pen/wvxdmbg?editors=1011)|
|Potatolee#7749|[Codepen](https://codepen.io/potatoleee/pen/gOjWeNM?editors=1011)|
|Winnie#1306|[Codepen](https://codepen.io/WinnieWuWinnie/pen/gOjWzGW?editors=1011)|
|Asher Xu#9297|[Codepen](https://codepen.io/kirakira72/pen/ExpmLLY)|
|阿沁#8176|[Codepen](https://codepen.io/a8322342/pen/bGjWKbx?editors=1011)|
|老皮博士#8050|[Codepen](https://codepen.io/li0406/pen/wvxdXBE?editors=1111)|
|suihsilan#9485|[Codepen](https://codepen.io/suihsilan/pen/RwBVyeV?editors=1011)|
|SASIMI#5099|[Codepen](https://codepen.io/sashimi1327/pen/RwBVKwd)|
|RJRS#9430|[CodePen](https://codepen.io/RJRS/pen/abjWKBm)|
|kuku#3118|[Codepen](https://codepen.io/mengting-ku/pen/KKBmevP)
|masterYan#2480|[Codepen](https://codepen.io/htzwgoqt-the-looper/pen/rNrmKvM?editors=1011)
|YI#0863|[CodePen](https://codepen.io/YI0305/pen/poZPZWP?editors=1011)|
|How#5806|[CodePen](https://codepen.io/howtobefine/pen/abjWaxv)|
|米米#1824|[CodePen](https://codepen.io/Jameshsu0407/pen/dyjWgNz?editors=1011)|
|RainLiao#2616|[CodePen](https://codepen.io/billpop741/pen/JjBNeya)|
|柚子#3958|[CodePen](https://codepen.io/as6625998/pen/OJwmarN?editors=1011)|
|Hironaka#7367|[CodePen](https://codepen.io/Hironaka0815/pen/RwBVqzP?editors=1011)|
|魚子醬#5220|[CodePen](https://codepen.io/haihsuan/pen/dyjWwpP)|
|Judy Wei#6103|[CodePen](https://codepen.io/Judy0718/pen/WNKjLLK)|
|Mia小福#4473|[CodePen](https://codepen.io/a0950271/pen/zYLwevv)|
|MengLin#3001|[CodePen](https://codepen.io/aacj2642/pen/XWBROMX?editors=1011)|
|yoyo123456#0577|[CodePen](https://codepen.io/hungyoyo/pen/mdjmogJ)|
|IreneY#0086|[CodePen](https://codepen.io/HalfPlannedJourney/pen/PoBmgWp)|
Zack_P#1805|[CodePen](https://codepen.io/tmzazirh-the-animator/pen/RwBVmWj?editors=1011)|
| christina#6185 |[Codepen](https://codepen.io/chrisc0210/pen/YzjVbKV)|
| Austyn#0949 |[Codepen](https://codepen.io/fish90547/pen/jOpmoMR?editors=1011)|
| RayChen#6088 |[Codepen](https://codepen.io/raychen1996/pen/jOpwbmr)|
|薯餅#3581|[Codepen](https://codepen.io/ColdingPoTaTo/pen/ExpXPyr)|
|心幻羽#0056|[Codepen](https://codepen.io/linglingsyu/pen/ZEjyQqP?editors=1011)|
|Amberhh#2465|[codepen](https://codepen.io/Amberhh/pen/MWBmreq) |
|yoyo#1003|[codepen](https://codepen.io/pen/QWBgyXZ) |
|RyanC#6960|[codepen](https://codepen.io/RyanYD/pen/NWBgNqL?editors=1011) |
| Jenny真#7532 | [CodePen](https://codepen.io/wei-chen-wu/pen/mdjwPMx?editors=1011) |
|ㄚ翔#8126|[codepen](https://codepen.io/engineerjohnson/pen/rNrwepx)|
|Bella_#1587|[codepen](https://codepen.io/Chen-Bella/pen/PoBjZOm)|
|kevin#6131|[codepen](https://codepen.io/xlqjezvc-the-encoder/pen/YzjQNOb?editors=1011)|
|Fang#4680|[Codepen](https://codepen.io/std95174/pen/eYjRReE)|
|竹輪#3335|[Codepen](https://codepen.io/chikuwa0120/pen/gOjRqGe)|
|shiuan#4721|[codepen](https://codepen.io/prankaChang/pen/NWBgQdj?editors=1011)|
|Shuo#1596|[codepen](https://codepen.io/chiangchungshuo/pen/YzjEGeg?editors=1011)|
|Yiru#0236|[Codepen](https://codepen.io/yiru94/pen/eYjVdOm?editors=1011)|
|enolachen#8031|[Codepen](https://codepen.io/Chen-Enola/pen/KKBoGbW)|
|Tuhacrt#0008|[codepen](https://codepen.io/Tuhacrt/pen/bGjKEPQ)|
|Silvialu#4521|[codepen](https://codepen.io/Silvia091640/pen/rNrKLzd)|
|yaru#6308|[CodePen](https://codepen.io/lszaietc/pen/PoBapzm?editors=1011)|
|大大#5164|[CodePen](https://codepen.io/gzonothk-the-looper/pen/abjKXLp)|
|Paul#7426|[CodePen](https://codepen.io/paul-1997/pen/RwBJmZM?editors=1011)|
|周周#3503|[CodePen](https://codepen.io/jhoujhou-the-decoder/pen/dyjjbMW?editors=1010)|
|KC_8685#9343|[Codepen](https://codepen.io/cathy7411/pen/OJwwEPQ)|
|ABOOS#6276|[CodePen](https://codepen.io/guhungyin/pen/vYaaaJb?editors=1010)|
|Hilda#7085|[Codepen](https://codepen.io/vwquikad-the-vuer/pen/WNKKKOQ)|
|GOD_QWERTYUIOPLKJLKLLOINJ_MASTER#4922|[Codepen](https://codepen.io/sho666/pen/YzjjOKm?editors=1010)|
|Yuna Huang#2692|[Codepen](https://codepen.io/Yuna1002/pen/QWBVedd?editors=1011)|
|Knock59487#9114|[CodePen](https://codepen.io/Zack88/pen/OJwdvzO?editors=1011)|
|hungya#0773|[CodePen](https://codepen.io/hungya777/pen/JjBQddK?editors=1011)|
|Mylène#2481|[CodePen](https://codepen.io/hamajibashi/pen/PodYopX)|
|Jujubeleven#1036|[Codepen](https://codepen.io/jujubeleven/pen/BaOBRNZ?editors=1011)|
|popcorn_3q#9893|[Codepen](https://codepen.io/arnyrpqt-the-sasster/pen/MWqKYWx)|
|JY#5712|[Codepen](https://codepen.io/judy_123/pen/XWPaOYa)|
|Eason#7884|[Codepen](https://codepen.io/ASLEO/pen/rNqOPOZ)|
|Eileen#6454|[Codepen](https://codepen.io/Eileen-io/pen/RweoOrR)|