---
tags: Vue 直播班 - 2023 冬季班
---
# 🏅 Day 22 - :class 運用

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

> 點擊「改變樣式」按鈕，會透過改變 isTransform 的 true／false：
> 1. 替 Q1 加上 stretch 這個 class
> 2. 替 Q2 加上 stretch, colorChange 這兩個 class

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

## 回報流程

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


<!-- 解答：
<div id="app">
<div class="container p-3">
<h3>Q1. 延伸</h3>
<div class="box mb-3" :class="{ 'stretch' : isTransform }"></div>
<h3>Q2. 延伸 + 變色</h3>
<div class="box mb-3" :class="[{ 'stretch' : isTransform }, { 'colorChange' : isTransform }]"></div>
<button type="button" class="btn btn-primary" @click="isTransform = !isTransform">改變樣式</button>
</div>
</div>

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

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

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

回報區
---

| Discord | CodePen / 答案 |
|:-----------:|:-----------------------------------------------------:|
| bf_tsai | [CodePen](https://codepen.io/BF-Tsai/pen/OJqWELP) |
| Yijing | [CodePen](https://codepen.io/Yi-Jing-71080635/pen/VwRPdZg?editors=1010) |
| Ann Chou | [CodePen](https://codepen.io/annchou_illu/pen/yLwgEao) |
| Tippy | [CodePen](https://codepen.io/Ektodor-Wang/pen/LYaxrpX) |
| Fabio20 | [CodePen](https://codepen.io/fabio7621/pen/wvOgXro) |
| 銀光菇 | [CodePen](https://codepen.io/genesynthesis/pen/gOEgKxa) |
| py | [CodePen](https://codepen.io/Wpypy/pen/vYPgrpY?editors=1010) |
| Ryann | [CodePen](https://codepen.io/csw8524/pen/rNRjKrZ) |
| runweiting | [CodePen](https://codepen.io/weiting14/pen/ZEPLRXx) |
|Eden|[Codepen](https://codepen.io/iseden/pen/MWxJXBG)|
| Celine 510 |[Codepen](https://codepen.io/Celine-510/pen/ExMZRBJ)|
| XinYu | [CodePen](https://codepen.io/HsuXinYu/pen/RwdKBwG) |
| Tom | [CodePen](https://codepen.io/sp1daTomm/pen/LYaxraP) |
| Nelly | [CodePen](https://codepen.io/Nelly-Guo/pen/LYaxBNp?editors=1011) |
| RayRay | [CodePen](https://codepen.io/CityRay/pen/GRerBmv) |
| Leo | [CodePen](https://codepen.io/Aruminiya/pen/yLwgqoZ) |
| KUN. | [CodePen](https://codepen.io/barry91205/pen/abMpjVO) |
| 風羽 | [CodePen](https://codepen.io/Joy-Huang/pen/ExMZpmx?editors=1010) |
| dora | [CodePen](https://codepen.io/dorayu/pen/RwdKBYL?editors=1011) |
| Uli | [CodePen](https://codepen.io/uli1313/pen/poYRZYX?editors=1010) |
| SHUO | [CodePen](https://codepen.io/xrzarxkl-the-reactor/pen/mdoRGJK) |
| kj | [CodePen](https://codepen.io/Eero-Chiao/pen/OJqWojq) |
| 小夏 | [CodePen](https://codepen.io/michaelhsia/pen/qBvRMKo) |
| Chia Pin | [CodePen](https://codepen.io/joker-cat/pen/bGZgmEp) |
| Moreene | [CodePen](https://codepen.io/Moreene/pen/mdoRGjv) |
| Helen | [CodePen](https://codepen.io/milkteamonster/pen/eYXgPWM?editors=1010) |
| JING | [CodePen](https://codepen.io/HSUANIN0327/pen/YzgNJQm)|
| 非常愛柯基 | [CodePen](https://codepen.io/jimjimEAC/pen/KKEaraG)|
| macihuang | [CodePen](https://codepen.io/macy1215/pen/rNRjQOR)|
| Winnie | [CodePen](https://codepen.io/codepen-io-winnie/pen/YzgNRQN?editors=1010)|
| FangFang | [CodePen](https://codepen.io/FangFang09/pen/zYbNmyy)|
| kawa | [CodePen](https://codepen.io/z83xji6/pen/abMpPbB?editors=0010) |
| MY | [CodePen](https://codepen.io/ahmomoz/pen/xxBgBgx) |
| ann6212 | [CodePen](https://codepen.io/yqmegupa-the-styleful/pen/dyrNrMG) |
| 保羅 | [CodePen](https://codepen.io/paul-1997/pen/mdoRgdx?editors=1010) |
| yu.t_liu | [CodePen](https://codepen.io/YuT200053/pen/rNRjbGW?editors=1010) |
| Antonio | [CodePen](https://codepen.io/gwhvusel-the-builder/pen/dyrNLEg) |
| Eazy | [CodePen](https://codepen.io/Eazychen/pen/poYRmEP?editors=1010) |
| WEI | [CodePen](https://codepen.io/wei-z/pen/JjzEqJe) |
| 熊大 | [CodePen](https://codepen.io/asiating/pen/dyrNrLR) |
| 欣霓 | [CodePen](https://codepen.io/tvxq5206/pen/jOJygeb?editors=1111) |
| MikeLin | [CodePen](https://codepen.io/MikeLin0701/pen/poYRMGb) |
| cest_jessi | [CodePen](https://codepen.io/itsjessiechen/pen/mdoRPxP) |
| PoWei#8484 | [CodePen](https://codepen.io/Po-Wei-Lai/pen/dyrvMQx?editors=1010) |
| hua | [CodePen](https://codepen.io/LHua/pen/MWxpeJz) |
| PoRay | [CodePen](https://codepen.io/raycheng/pen/rNRyMqy) |
| Charlotte Lee | [CodePen](https://codepen.io/char849/pen/NWJpbWG) |
| Yang | [CodePen](https://codepen.io/Yang-J/pen/jOJBBmg) |
| Ataraxia | [CodePen](https://codepen.io/ataraxia8888/pen/OJqpmmV) |
|wei_Rio|[CodePen](https://codepen.io/wei_wu/pen/LYaWQGB)|
| Chris | [CodePen](https://codepen.io/cjtseng07/pen/dyrveVZ) |
| Rock | [CodePen](https://codepen.io/xiu43317/pen/OJqpwQx) |
| fanshu0303 | [CodePen](https://codepen.io/JuiHsuanLee0303/pen/ZEPeqov) |
| PayRoom |[CodePen](https://codepen.io/water38198/pen/gOEmyWK)
| Ariel | [CodePen](https://codepen.io/ariel0510/pen/LYaWvQj) |
| .zack_p | [CodePen](https://codepen.io/Designer-PH/pen/QWopXda?editors=1111) |
| hedy | [CodePen](https://codepen.io/Hedy_H/pen/mdoWYba?editors=1010) |
| Emily | [CodePen](https://codepen.io/Emily2089/pen/jOJmwMa?editors=1010) |
| 精靈 | [CodePen](https://codepen.io/justafairy/pen/abMWwqg) |
| ⭐️小正 | [CodePen](https://codepen.io/colorgolden/pen/ZEPLVxB?editors=1010) |
| elena | [CodePen](https://codepen.io/elena0127abc/pen/YzgVvxR) |
| celinelinnn |[CodePen](https://codepen.io/celinephoebe/pen/mdomoPJ)|
| jeremyChan | [CodePen](https://codepen.io/nudieisgood/pen/JjzNqqm?editors=1011)
| 翔.Ben | [CodePen](https://codepen.io/energy95272z/pen/JjzNQwP) |
| 狸貓 | [CodePen](https://codepen.io/tanuki320/pen/wvOdVgX?editors=1010) |
| Ting | [CodePen](https://codepen.io/liara/pen/WNmOQLd)|
| sponge | [CodePen](https://codepen.io/biunpujm-the-flexboxer/pen/PoLjJxM?editors=1010) |
| chihyang | [CodePen](https://codepen.io/hike1707/pen/bGZRagM) |
| stone4584 | [CodePen](https://codepen.io/Royen0506/pen/WNmOYNx) |
| jia yu | [CodePen](https://codepen.io/fjqxaznl-the-reactor/pen/YzgxZWq?editors=1010) |
| xuan | [CodePen](https://codepen.io/xuan0915/pen/wvOqdBY?editors=1010) |
| santu0868 | [CodePen](https://codepen.io/HatsumiSan/pen/xxBLdmP) |
| peggy | [CodePen](https://codepen.io/peggylai/pen/WNmEmaR) |
| Jim | [CodePen](https://codepen.io/asiahedh-the-encoder/pen/VwRzNKL) |
| skypassion5000 | [CodePen](https://codepen.io/skypassion5000/pen/qBvXzEo?editors=1010) |
| shuuu | [CodePen](https://codepen.io/jybvfzos-the-bashful/pen/dyrZozv) |
| _amaaaa | [CodePen](https://codepen.io/Alicia-Chu/pen/BabJaqX) |
| Iris | [CodePen](https://codepen.io/iris831206/pen/JjzMZaY) |
|yuling| [Codepen](https://codepen.io/igzdflpu/pen/bGZaXQw?editors=1010)|
| haru | [CodePen](https://codepen.io/haru_portfoilo/pen/vYPdEQo?editors=1010) |
| 貢波波夫 | [CodePen](https://codepen.io/mxgrfgcr-the-bashful/pen/VwRXpXE) |
| WA | [CodePen](https://codepen.io/ldddl/pen/MWxdqmN) |
| yuan! | [CodePen](https://codepen.io/townyuan/pen/eYopBrP) |

<!--

| user | [CodePen]() |

-->