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

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

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

## 回報流程

將答案寫在 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>
-->

回報區
---

| Discord | CodePen / 答案 |
|:-----------:|:-----------------------------------------------------:|
| 冬天#5215 | [CodePen](https://codepen.io/winter_/pen/wvxJWRq) |
| Wendy3#5616 | [CodePen](https://codepen.io/wendy03/pen/KKBWMbR) |
| albee#9121 | [Codepen](https://codepen.io/albee-chang/pen/LYBxQVQ) |
| YC#2522 | [CodePen](https://codepen.io/YCLu/pen/ZEjeOPm) |
| aki | [codepen](https://codepen.io/aki168/pen/jOpPZVo) |
| int#7518 | [Codepen](https://codepen.io/intHuang/pen/gOjmMEm) |
| 阿榮#8277 |[CodePen](https://codepen.io/mogzbvfl-the-reactor/pen/QWBpEYQ)|
|Fang#4680|[Codepen](https://codepen.io/std95174/pen/XWBMKQG)
|popeye#5081|[codepen](https://codepen.io/popeye_ux/pen/xxJqOMv)|
| yuyu#6310 |[CodePen](https://codepen.io/yuyu0905/pen/PoBpzgm?editors=1010)|
| LinaChen#1796 |[CodePen](https://codepen.io/LinaChen/pen/NWBprmX)|
| ViNci#4273 |[CodePen](https://codepen.io/ViNciSyo/pen/poZebXO)|
|柔柔#1716|[Codepen](https://codepen.io/rouchen/pen/eYjvzqx?editors=1010)|
|威0#6919|[codepen](https://codepen.io/n0918679182/pen/OJwpRLj?editors=1010)|
|ChloeLo#4858|[codepen](https://codepen.io/chloelo/pen/qByrNgW)|
|RainJ#3480|[codepen](https://codepen.io/RainJCode/pen/ZEjepbP)|
|PeihanWang#2530|[Codepen](https://codepen.io/PeihanWang/pen/poZeEjQ)|
|Jill Lee#0809|[Codepen](https://codepen.io/chi-ling-lee/pen/oNMZzgb))|
|AuroraC#6539|[codepen](https://codepen.io/AuroraC/pen/XWBMjrw)|
|大衛#4869|[codepen](https://codepen.io/exnsrpjc/pen/QWBpKLr)|
|威爾#1694|[CodePen](https://codepen.io/WILL_Wu/pen/wvxJzzm)|
|kenki100#0068|[Codepen](https://codepen.io/ken100/pen/gOjmwax)|
|masterYan#2480|[Codepen](https://codepen.io/htzwgoqt-the-looper/pen/gOjmwLG?editors=1010)|
|薯餅#3581|[Codepen](https://codepen.io/ColdingPoTaTo/pen/JjBWRRY)|
|心幻羽#0056|[Codepen](https://codepen.io/linglingsyu/pen/gOjmwwG)|
|JackC#0411|[Codepen](https://codepen.io/key0329/pen/abjJmBz)|
|hannahtw#2224|[Codepen](https://codepen.io/hangineer/pen/ZEjepOZ?editors=1010)|
|米米#1824|[Codepen](https://codepen.io/Jameshsu0407/pen/KKBWgNr)|
|RyanC#6960|[Codepen](https://codepen.io/RyanYD/pen/oNMZLrj?editors=1011)|
|Chi#7605|[Codepen](https://codepen.io/YoChi84/pen/PoBpzMj)|
|Kimi#9564|[CodePen](https://codepen.io/kimihu91/pen/xxJwjGm)|
|Curtis#4780|[CodePen](https://codepen.io/curtislin/pen/ExpWgQV?editors=1010)|
|Tami#6742|[Codepen](https://codepen.io/wqsdqbjn-the-vuer/pen/mdjWrqq)|
|mandylai#4055|[Codepen](https://codepen.io/mandy-lai-2/pen/LYBWRGG)|
|Benson#6763|[Codepen](https://codepen.io/kumashow/pen/zYLZKav)|
|PayRoom#8328|[CodePen](https://codepen.io/water38198/pen/oNMZzRe)|
|法希娜#3206|[CodePen](https://codepen.io/yiiserpf-the-encoder/pen/QWBpKzP)|
|Wendy77#8049|[Codepen](https://codepen.io/Wendy__/pen/JjBWRab)|
|Alex#9978|[Codepen](https://codepen.io/datsxzqg-the-selector/pen/zYLZKVK?editors=1010)|
|泊岸#3466|[Codepen](https://codepen.io/qoq77416416/pen/bGjqwax)|
|圈圈#4060|[Codepen](https://codepen.io/wjejfczn-the-bold/pen/jOpBVPN)|
|無名#6427|[Codepen](https://codepen.io/Nomoney/pen/rNrjKmw)|
|大頭#8116|[Codepen](https://codepen.io/d22495521/pen/ExpWNPW)|
|老皮博士#8050|[Codepen](https://codepen.io/li0406/pen/GRBWNQe)|
|Winnie#1306|[Codepen](https://codepen.io/WinnieWuWinnie/pen/yLqMVZM)|
|azami#5986|[Codepen](https://codepen.io/azami/pen/JjBWbzB)|
|suihsilan#9485|[Codepen](https://codepen.io/suihsilan/pen/abjJBxG)|
|ㄚ翔#8126|[codepen](https://codepen.io/engineerjohnson/pen/ExpWZXO)|
|MengLin#3001|[codepen](https://codepen.io/aacj2642/pen/BaPWpYp)|
|Ruby Chen#7452|[codepen](https://codepen.io/ruby92429/pen/YzjZNvX)|
|Potatolee#7749|[codepen](https://codepen.io/potatoleee/pen/ZEjeLjM?editors=1100)|
|楊苡安#2752|[codepen](https://codepen.io/yi-an-yang/pen/eYjvgwx?editors=1010)|
|helena#8461|[codepen](https://codepen.io/helena27/pen/xxJqqqw)|
|Wei#2330|[Codepen](https://codepen.io/ixfjxrbo-the-typescripter/pen/yLqMMRm)|
|RJRS#9430|[CodePen](https://codepen.io/hexschool/pen/MWXPVGL)|
|Rena#6249|[Codepen](https://codepen.io/aureate0116/pen/poZePbJ)
|Asher Xu#9297|[Codepen](https://codepen.io/kirakira72/pen/xxJqdEL)|
|jacky010080#0880|[CodePen](https://codepen.io/Yen-Jung-Chen/pen/QWBpvOb?editors=1010)|
|竹輪#3335|[CodePen](https://codepen.io/chikuwa0120/pen/WNKpjXb)|
|Paul#7426|[CodePen](https://codepen.io/paul-1997/pen/MWBpmVb?editors=1111)|
|LHchien33#6232|[CodePen](https://codepen.io/lin_chien/pen/PoBpmpL)|
|魚子醬#5220|[CodePen](https://codepen.io/haihsuan/pen/MWBpmNo)|
|出事了阿伯#9923|[CodePen](https://codepen.io/BradpittLai/pen/eYjvWxE)|
|JimmyChang#5558|[CodePen](https://codepen.io/JimmyChangWenChi/pen/NWBpjwW)|
|阿鑫#4346|[CodePen](https://codepen.io/Neil1024/pen/GRBWMpX)|
|Amberhh#2465|[codepen](https://codepen.io/Amberhh/pen/RwBpGPK)|
|xin#1214|[codepen](https://codepen.io/SiaoYao/pen/xxJqPXM)|
|小木馬#8760|[codepen](https://codepen.io/wmmtbcsd/pen/yLqMPPv?editors=1010)|
|Cheryl#4007|[Codepen](https://codepen.io/Cheryl-Hsu/pen/WNKpXgZ?editors=1010)|
|Bella_#1587|[Codepen](https://codepen.io/Chen-Bella/pen/jOpBadZ)
|Bassjim#0118|[Codepen](https://codepen.io/unrtxbaq/pen/MWBpQGb?editors=1010)
| Hironaka#7367 | [CodePen](https://codepen.io/Hironaka0815/pen/YzjZeYO)|
|yoyo123456#0577|[CodePen](https://codepen.io/hungyoyo/pen/XWBMEBy)|
|SASIMI#5099|[Codepen](https://codepen.io/sashimi1327/pen/eYjvMVK)|
|Mia小福#4473|[Codepen](https://codepen.io/a0950271/pen/RwBpMXG)|
|DIO大人#4776|[Codepen](https://codepen.io/hexschool/pen/MWXPVGL)|
Zack_P#1805|[Codepen](https://codepen.io/tmzazirh-the-animator/pen/PoBpevB)|
| christina#6185 | [Codepen](https://codepen.io/chrisc0210/pen/YzjZLoE)|
| Austyn#0949 | [Codepen](https://codepen.io/fish90547/pen/xxJqzaY)|
|yoyo#1003 | [Codepen](https://codepen.io/pen/oNMZReE)|
|YI#0863 | [Codepen](https://codepen.io/YI0305/pen/bGjqyjb?editors=1011)|
|Rainliao#2616 | [Codepen](https://codepen.io/billpop741/pen/KKBWLjg)|
|柚子#3958| [Codepen](https://codepen.io/as6625998/pen/KKBWOpe)|
|FiReBrO#0557|[Codepen](https://codepen.io/firebro42/pen/KKBmwjL)|
|How#5806|[Codepen](https://codepen.io/howtobefine/pen/OJwmMQz)|
|阿異#4776|[CodePen](https://codepen.io/yani21399/pen/gOjWmjX)|
|Cream#3449|[CodePen](https://codepen.io/frxdwbbi-the-sasster/pen/GRBmQXw?editors=1010)|
|阿沁#8176|[CodePen](https://codepen.io/a8322342/pen/NWBjMrw)|
|Judy Wei#6103|[CodePen](https://codepen.io/Judy0718/pen/RwBVYyp)|
|Bassjim#0118|[CodePen](https://codepen.io/unrtxbaq/pen/NWBjmKj?editors=1011)|
|IreneY#0086|[CodePen](https://codepen.io/HalfPlannedJourney/pen/ZEjKPZx)|
|Hazel.#6020|[CodePen](https://codepen.io/Hazelhsieh/pen/xxJdpZo?editors=1011)|
| Jenny真#7532 | [CodePen](https://codepen.io/wei-chen-wu/pen/dyjROeZ?editors=1010) |
| kevin#8349 | [CodePen](https://codepen.io/xlqjezvc-the-encoder/pen/WNKORyG?editors=1111) |
|shiuan#4721|[codepen](https://codepen.io/prankaChang/pen/yLqXdWX)|
|enolachen#8031|[codepen](https://codepen.io/Chen-Enola/pen/bGjrWev)|
|Cookie SSS#6991|[codepen](https://codepen.io/sqhjikpa-the-selector/pen/KKBXbqa)|
|GOD_QWERTYUIOPLKJLKLLOINJ_MASTER#4922|[codepen](https://codepen.io/sho666/pen/XWBVXvE)|
|Mylène#2481|[CodePen](https://codepen.io/hamajibashi/pen/jOpYBME)|
|Yiru#0236|[Codepen](https://codepen.io/yiru94/pen/GRBmgrm)|
|Tuhacrt#0008|[codepen](https://codepen.io/Tuhacrt/pen/gOjKPvG)|
|Silvialu#4521|[codepen](https://codepen.io/Silvia091640/pen/oNMyLwV)|
|yaru#6308|[CodePen](https://codepen.io/lszaietc/pen/oNMyBrv?editors=1010)|
|大大#5164|[CodePen](https://codepen.io/gzonothk-the-looper/pen/VwBdqjL)|
|周周#3503|[CodePen](https://codepen.io/jhoujhou-the-decoder/pen/RwBJXep?editors=1010)|
|KC_8685#9343|[Codepen](https://codepen.io/cathy7411/pen/rNrjQYQ)|
|ABOOS#6276|[CodePen](https://codepen.io/guhungyin/pen/VwBBBKG?editors=1010)|
|Hilda#7085|[Codepen](https://codepen.io/vwquikad-the-vuer/pen/BaPPPoe)|
|Yuna Huang#2692|[Codepen](https://codepen.io/Yuna1002/pen/bGjxPYX)|
|Knock59487#9114|[Codepen](https://codepen.io/Zack88/pen/JjBxLoQ)|
|阿蘇#8531|[Codepen](https://codepen.io/susu3131/pen/JjBzmGM?editors=1011)|
|hungya#0773|[Codepen](https://codepen.io/hungya777/pen/KKBjwmR?editors=1010)|
|Jujubeleven#1036|[Codepen](https://codepen.io/jujubeleven/pen/YzOKZBP?editors=1010)|
|popcorn_3q#9893|[Codepen](https://codepen.io/RyanYD/pen/oNMZLrj?editors=1111)|
|JY#5712|[Codepen](https://codepen.io/judy_123/pen/GRXvPOO)|
|Eason#7884|[Codepen](https://codepen.io/ASLEO/pen/YzJyXyy)|
|Eileen#6454|[Codepen](https://codepen.io/Eileen-io/pen/yLRVwbo)|