---
# System prepended metadata

title: "\U0001F3C5 Day 24 - v-else-if"
tags: [Vue 直播班 - 2023 冬季班]

---

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

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

#### 額外挑戰
完成上述題目後，嘗試將 JS 區塊改為使用 Composition API 撰寫

## 回報流程

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

![](https://i.imgur.com/vftL5i0.png)

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

https://codepen.io/jmimiding4104/pen/qBvBOej

額外挑戰：
https://codepen.io/jmimiding4104/pen/KKEKVPP

模板與解答皆有使用 Bootstrap5(於 Setting 中引入)，
所以如果想要畫面呈現是相同的要記得載入 Bootstrap5 的 CDN。
-->




回報區
---


|    Discord    |                          CodePen / 答案                          |
|:-------------:|:----------------------------------------------------------------:|
| Yijing | [CodePen](https://codepen.io/Yi-Jing-71080635/pen/YzgZYEa?editors=1011) |
| bf_tsai | [CodePen](https://codepen.io/BF-Tsai/pen/zYbZyGv) | 
| andrea | [CodePen](https://codepen.io/Wpypy/pen/ZEPeVQz?editors=1011) | 
| Ann Chou | [CodePen](https://codepen.io/annchou_illu/pen/ExMWGgK) | 
| Fabio20 | [CodePen](https://codepen.io/fabio7621/pen/jOJBXrR?editors=1011) |
| runweiting | [CodePen](https://codepen.io/weiting14/pen/ZEPeVbz) | 
| Tippy | [CodePen](https://codepen.io/Ektodor-Wang/pen/OJqprpo) | 
| Winnie | [CodePen](https://codepen.io/codepen-io-winnie/pen/dyrvwMR?editors=1010) |
| kawa | [CodePen](https://codepen.io/z83xji6/pen/vYPxvyp?editors=1011) | 
| 銀光菇 | [CodePen](https://codepen.io/genesynthesis/pen/mdoWaWx) |
| JING | [CodePen](https://codepen.io/HSUANIN0327/pen/LYaWMOj) | 
| Celine 510 | [CodePen](https://codepen.io/Celine-510/pen/rNRyope) | 
| hua | [CodePen](https://codepen.io/LHua/pen/QWopzqX?editors=1111) | 
| 風羽 | [CodePen](https://codepen.io/Joy-Huang/pen/eYXvbdm?editors=0011) | 
| XinYu | [CodePen](https://codepen.io/HsuXinYu/pen/mdoWapK?editors=1011) | 
| dora | [CodePen](https://codepen.io/dorayu/pen/VwRpqQQ?editors=1011) | 
| 小夏 | [CodePen](https://codepen.io/michaelhsia/pen/qBvrLzx) | 
| Ryann | [CodePen](https://codepen.io/csw8524/pen/OJqpdPe) |
| Eden |[Codepen](https://codepen.io/iseden/pen/JjzWxXv)|
| Nelly | [CodePen](https://codepen.io/Nelly-Guo/pen/gOEmqwN?editors=1011) | 
| Chia Pin | [CodePen](https://codepen.io/joker-cat/pen/ZEPewvX) | 
| macihuang | [CodePen](https://codepen.io/macy1215/pen/poYeGPR) | 
| RayRay | [CodePen](https://codepen.io/CityRay/pen/NWJpoGq) |
| Uli | [CodePen](https://codepen.io/uli1313/pen/ExMWrpp?editors=1011) |
| Moreene | [CodePen](https://codepen.io/Moreene/pen/XWGMGBL) | 
| PayRoom |[CodePen](https://codepen.io/water38198/pen/MWxpRXa) |
| fanshu0303| [CodePen](https://codepen.io/JuiHsuanLee0303/pen/wvOJbxG) |
| KUN.| [CodePen](https://codepen.io/barry91205/pen/XWGMwoY?editors=1010) |
| Helen| [CodePen](https://codepen.io/milkteamonster/pen/VwRpOeE?editors=1111) |
|Wei_Rio|[CodePen](https://codepen.io/wei_wu/pen/JjzWQKQ?editors=1011)|
|WEI|[CodePen](https://codepen.io/wei-z/pen/VwRbZyR)|
|熊大|[CodePen](https://codepen.io/asiating/pen/yLwbyVm?editors=1011)|
| Eazy | [CodePen](https://codepen.io/Eazychen/pen/VwRbYzM?editors=1011) | 
| ChrisT | [CodePen](https://codepen.io/cjtseng07/pen/yLwbNrP) | 
| MY | [CodePen](https://codepen.io/ahmomoz/pen/RwdVWvp?editors=1111) | 
| yu.t_liu | [CodePen](https://codepen.io/YuT200053/pen/ZEPKWWL?editors=1010) | 
| pikachu | [CodePen](https://codepen.io/pikachu__/pen/wvOddYM) | 
| hedy | [CodePen](https://codepen.io/Hedy_H/pen/abMWWMa?editors=1011) |
| Tom | [CodePen](https://codepen.io/sp1daTomm/pen/abMWWgR) | 
| Emily | [CodePen](https://codepen.io/Emily2089/pen/VwRbWML?editors=1011) |
| 精靈 | [CodePen](https://codepen.io/justafairy/pen/wvOdejr) |
| Leo | [CodePen](https://codepen.io/Aruminiya/pen/NWJjvEV) |
| ⭐️小正 | [CodePen](https://codepen.io/colorgolden/pen/VwRpJKL) |
| SHUO | [CodePen](https://codepen.io/xrzarxkl-the-reactor/pen/MWxmGBY?editors=1011) | 
| elena | [CodePen](https://codepen.io/elena0127abc/pen/dyrWKeQ) | 
| MikeLin | [CodePen](https://codepen.io/MikeLin0701/pen/oNVWyOm) | 
| Ariel | [CodePen](https://codepen.io/ariel0510/pen/zYbwmEE?editors=1010) |
| Ataraxia | [CodePen](https://codepen.io/ataraxia8888/pen/ZEPKqeL) | 
| celinelinnn |[CodePen](https://codepen.io/celinephoebe/pen/WNmjmeR)|
| PoWei#8484 |[CodePen](https://codepen.io/Po-Wei-Lai/pen/oNVWRjE?editors=1011)|
| jeremyChan | [CodePen](https://codepen.io/nudieisgood/pen/qBvmzdg?editors=1011) | 
| 翔.Ben | [CodePen](https://codepen.io/energy95272z/pen/ZEPKdPV?editors=1011) | 
| FangFang | [CodePen](https://codepen.io/FangFang09/pen/rNRmXjB) | 
| 狸貓 | [CodePen](https://codepen.io/tanuki320/pen/ZEPKgvz?editors=1010) | 
| Ting | [CodePen](https://codepen.io/liara/pen/XWGgXaW)|
| 欣霓 | [CodePen](https://codepen.io/tvxq5206/pen/eYXRBGg?editors=1011) | 
| cest_jessie | [CodePen](https://codepen.io/itsjessiechen/pen/WNmORgX) | 
| Rock | [CodePen](https://codepen.io/xiu43317/pen/XWGgRQV) | 
| sponge | [CodePen](https://codepen.io/biunpujm-the-flexboxer/pen/BabZwOB?editors=1010) |
| 保羅 | [CodePen](https://codepen.io/paul-1997/pen/vYPZWYw?editors=1111) |
| 鮮奶油櫻桃煎餅 | [CodePen](https://codepen.io/mattielin/pen/vYPZJwd?editors=1011) | 
| Antonio | [CodePen](https://codepen.io/gwhvusel-the-builder/pen/MWxmrad) |
| ann6212 | [CodePen](https://codepen.io/yqmegupa-the-styleful/pen/oNVwyxo) |
| stone4584 | [CodePen](https://codepen.io/Royen0506/pen/GReEwWg?editors=1011)|
|Yang|[Codepen](https://codepen.io/Yang-J/pen/bGZRQYg)|
| PoRay | [CodePen](https://codepen.io/raycheng/pen/JjzyXpr?editors=1011) | 
| .zack_p | [CodePen](https://codepen.io/Designer-PH/pen/OJqjWEN?editors=1011) | 
| jia yu | [CodePen](https://codepen.io/fjqxaznl-the-reactor/pen/zYbdZEg) | 
| xuan | [CodePen](https://codepen.io/xuan0915/pen/jOJLwPr?editors=1011) | 
| peggy | [CodePen](https://codepen.io/peggylai/pen/MWxvxdV?editors=1010) | 
| santu0868 | [CodePen](https://codepen.io/HatsumiSan/pen/qBvXwVE?editors=1010) |
| skypassion5000 | [CodePen](https://codepen.io/skypassion5000/pen/xxBXWpj) |
| _amaaaa | [CodePen](https://codepen.io/Alicia-Chu/pen/VwRywNE?editors=1111) |
| Iris| [CodePen](https://codepen.io/iris831206/pen/vYPprPZ?editors=1011) |
|yuling|[Codepen](https://codepen.io/igzdflpu/pen/vYPRXKa?editors=1011)|
| haru | [CodePen](https://codepen.io/haru_portfoilo/pen/dyrmpBa?editors=1011) | 
| 貢波波夫 | [CodePen](https://codepen.io/mxgrfgcr-the-bashful/pen/qBvorMK) | 
| WA | [CodePen](https://codepen.io/ldddl/pen/dyrEgPe) | 
| yuan! | [CodePen](https://codepen.io/townyuan/pen/zYXvoyX) | 


<!-- 

| Discord | [CodePen]() | 

-->

