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

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

題目 (請將答案貼上 CodePen)
---
操作 [這個模板](https://codepen.io/znlcgmgk/pen/MWJZoGQ?editors=1010)，執行以下要求 (只能操作 HTML 的部分):

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

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


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


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

回報區
---
| 報數 |組別/名字 | codepen / 其他回饋 |
|:--------:| -------- | -------- |
|1|CloThEs | https://codepen.io/bogwdnxx-the-sans/pen/wvPwOpz|
|2|Aaron Tu|https://codepen.io/aarontu/pen/vYWBMXX|
|3| Larry | https://codepen.io/larrylinr5/pen/GROKLqW |
|4| 肉鬆 | https://codepen.io/klrkicog/pen/yLPBrOR?editors=1010 |
|5| Iris Huang | https://codepen.io/ythuang/pen/mdqbgRW |
|6| Jhen | https://codepen.io/cheng-jhen/pen/rNYBbWb |
|7| Wenfish | https://codepen.io/wenfisht/pen/ZEazZpw |
|8|dOvOb|https://codepen.io/gezzgrwj-the-styleful/pen/WNXeWxz|
|9|POPEYE|https://codepen.io/popeye_ux/pen/MWOgRRN|
|10|Jason Chen|https://codepen.io/jason60810/pen/QWOLPgB |
|11| Kelvin Hsu | https://codepen.io/kelvin001/pen/XWzrQvm?editors=1010 |
|12| 黑川 | https://codepen.io/kurokawa/pen/bGYbJXQ |
|13|Howard|https://codepen.io/yawdnhbm/pen/wvPwbgO|
|14|Gill|https://codepen.io/Gill-Chin/pen/dyZbEOJ|
|15|YC|https://codepen.io/YCLu/pen/bGYbyry |
|16|Himi|https://codepen.io/Himi/pen/podzmKg|
|17|Yunei|https://codepen.io/Yunei/pen/XWzrwYR|
|18|Sheep| https://codepen.io/SheepNDW/pen/wvPwLxg |
|19|Terry21|https://codepen.io/feng0409/pen/rNYBEvK?editors=1010 |
|20|Empty Wu|https://codepen.io/emptywu/pen/vYWBqMN |
|21|Bella Shya|https://codepen.io/BellaXie/pen/NWwKZEg|
|22|kk|https://codepen.io/potatokaka/pen/GROKbLq?editors=1010|
|23|有廖先生(Rain)|https://codepen.io/billpop741/pen/LYOPwNE|
| 24 | Sihle Huang | https://codepen.io/bugbug777/pen/wvPwLOd |
|25|Tim Lin|https://codepen.io/TimmyLin/pen/abVoeGO|
|26|Charlotte Lee|https://codepen.io/charlotte-lee/pen/bGYbXvK |
|27|PeiChi|https://codepen.io/pei-chi-tsai/pen/abVoeeZ?editors=1100|
|28|陳暐中|https://codepen.io/wei-z/pen/qBVBWWR|
|29| 黃士桓 | https://codepen.io/shr-huan-huang/pen/ExbxYVg?editors=1010 |
|30|威爾|https://codepen.io/WILL_Wu/pen/VwrwZar|
|31|Jerry|https://codepen.io/rteyfwwd-the-scripter/pen/BamaByq|
|32|Arista|https://codepen.io/arista-hsieh/pen/oNoNvWo|
|33|andersonshen| https://codepen.io/luxyenni-the-bold/pen/PoOoYyg |
|34|Elaine Liu|https://codepen.io/elaine7598/pen/XWzrLKZ|
|35|Henry Wu|https://codepen.io/dkcmlaww-the-flexboxer/pen/rNYNNoZ|
|36|16/小K|https://codepen.io/kelen1995/pen/vYWYYGM|
|37|Benson|https://codepen.io/soul81624/pen/ExbxaxJ|
|38|Liu| https://codepen.io/feng-chi-liu/pen/abVbzJo |
|39|Jasper|https://codepen.io/li-jasper/pen/jOaOEav |
|40|Judy☻|https://codepen.io/hsiaohan/pen/VwrweZL |
|41|Rick Tzeng|https://codepen.io/rick917jp6/pen/gOXOrxB
|42|咖咖|https://codepen.io/gon790219/pen/dyZyXRr |
|43|shio|https://codepen.io/shioyen/pen/mdqdOJX?editors=1010 |
|44|AKI| https://codepen.io/akichen27/pen/oNoNYBG |
|45|柴貓| https://codepen.io/shibacat/pen/ExbxvMj |
|46|Evan|https://codepen.io/piskesocute/pen/wvPvXwx|
|47|AllenW|https://codepen.io/AllenW/pen/ZEaEMvw|
|48|Bonnie|https://codepen.io/bonnieli1414/pen/RwjwYyK |
|49|nora-end|https://codepen.io/nora-shu/pen/wvPvRNm?editors=1010
|50|我是泇吟|https://codepen.io/kljuqbxs/pen/PoOoLov|
|51|Scottie|https://codepen.io/wow767t/pen/eYeYxMZ|
|52| Otis | https://codepen.io/humming74/pen/bGYGJBr |
|53| 肉桂卷 |https://codepen.io/ginnlee/pen/oNoNKJx?editors=1010|
|54|Calon|https://codepen.io/Calon0118/pen/podvoae|
|55|Bruno Yu|https://codepen.io/bruno-yu/pen/YzEPPEq?editors=1010|
|56|tingyu|https://codepen.io/dgltu/pen/bGYNELY?editors=1111 |
|57|阿劍| https://codepen.io/seonkuraito/pen/JjrxXgN |
|58|Vicky|https://codepen.io/hyxfish27/pen/OJOPwPq |
|59|DDDDK|https://codepen.io/dkklee/pen/MWOYNPq |
|60|Steven Chan|https://codepen.io/Steven1220/pen/yLPyrgv |
|61|Henry|https://codepen.io/kaohenry9287/pen/RwjPLOQ|
|62|Yummyniya|https://codepen.io/yummyniya/pen/dyZYNpV|
|63|mei|https://codepen.io/Shila-Chen/pen/ZEabZEL|
|64|JD孟璁|https://codepen.io/oikdkmxq-the-looper/pen/OJONQxX?editors=1010 |
|65|FuChang|https://codepen.io/fuchang830714/pen/RwjWadL|
|66|hua|https://codepen.io/hahahazzz123/pen/vYWGqQJ?editors=1111|
|67|阿武|https://codepen.io/samwnkyat/pen/gOXwaWL|
|68|Anna|https://codepen.io/kycrleao/pen/oNoZNwa|
|69|ZY Hsu|https://codepen.io/zihyin/pen/VwrprZx?editors=1010|
|70|Gui|https://codepen.io/guitimliu/pen/bGYdmdY
|71|andyii|https://codepen.io/gultrotpybyvue/pen/eYeyOBR|
|72|Hedy|https://codepen.io/hhhsuan41/pen/zYPWRrq|
|73| Mylène | https://codepen.io/hamajibashi/pen/gOXZwyZ |
|73|紙飛機| https://codepen.io/paperplanea/pen/BambEap |
|74|大衛|https://codepen.io/exnsrpjc/pen/xxprXmp|
|75|Carol Li|https://codepen.io/carolli834/pen/BarbYOB|