# 🏅 5/25 (二) 每日任務 Day 22
###### tags: `Vue 直播班 - 2021 夏季班`

題目 (請將答案貼上 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>
-->

回報區
---
<!--1:Alpha
Codepen:https://codepen.io/alphatero/pen/vYxmbjd
-->

<!-- 2:Erica
https://codepen.io/ericadu/pen/XWMROYd
-->

<!-- 3: Tofu Tseng
https://codepen.io/Tofutseng/pen/jOBmdvg

每日任務回饋：
(1)為什麼不能這樣寫（會報錯）？用三元運算子的方式去寫判斷？
<div class="box mb-3" :class="{ isTransform ? 'stretch' : '' }"></div>

(2)如果是同一層級的 className，即使不寫成：
:class="[{ 'stretch' : isTransform }, { 'colorChange' : isTransform }]"

寫成：:class="{ 'stretch colorChange' : isTransform }"
也可以執行，對嗎？
-->

<!--4:leolee
Codepen:https://codepen.io/nekorice/pen/NWpjoMJ
-->

<!--5:Jasmin
Codepen:https://codepen.io/thejasmin/pen/ZEeKwdO
-->

<!--6:小魚
Codepen: https://codepen.io/jarvis1993/pen/ZEeKwZW
-->

<!--7:Joe Kuo
Codepen: https://codepen.io/alertislow/pen/GRWmzbw?editors=1100
-->

<!-- 8: 阿倫
CodePen: https://codepen.io/jason5125122/pen/bGqWzKz
-->

<!-- 9:Vic
:class 可以用物件的格式寫，也可以不寫物件格式直接寫三元運算式
Codepen:https://codepen.io/hsuan333/pen/bGqWzzJ
-->

<!-- 10: Lina Chen
CodePen: https://codepen.io/LinaChen/pen/MWpmxgy
-->
<!-- 11:陳sam
codepen:https://codepen.io/euldpliv/pen/NWpjoVZ
-->
<!-- 12:LiShang
codepen:https://codepen.io/li-shang/pen/qBrmvBp
-->

<!-- 13:Tori
codepen: https://codepen.io/hayen/pen/dyvWMbv?editors=1011
-->

<!-- 14: Echo Hui
:class 可以有以下幾種寫法
1. 三元運算子寫法
2. 物件寫法， 兩個class 分別在兩個不同的key值
3. 物件寫法， 兩個class 合併在同一key值
CodePen: https://codepen.io/echohuiecho/pen/poePYpR -->

<!-- 15: Harold
codepen: https://codepen.io/YuWin0805/pen/eYvWXeE
-->
<!-- 15: YuSung
codepen: https://codepen.io/kevin-hsu-the-encoder/pen/mdWmoGN
-->
<!-- 17:youting
codepen: https://codepen.io/youtingluo/pen/wvJdORG?editors=1010
-->

<!-- 18:Iven
有點不懂為什麼，切換樣式的按鈕@click="isTransform=!isTransform"要這樣寫，
有點不了解意思。
codepen: https://codepen.io/rtorihnk/pen/PopmLWr?editors=1111
-->

<!-- 19: Alysa Chan
https://codepen.io/alysachan/pen/poePBoW
-->

<!-- 20: Jordan Tseng
https://codepen.io/jordan-ttc-design/pen/dyvWLPB
-->

<!-- 21: Izumi 泉
https://codepen.io/izumi-dev/pen/eYvWoBj
-->

<!-- 22: yijun
https://codepen.io/sandy3068/pen/poePBaK
-->

<!-- 23: Yiren
codepen: https://codepen.io/Yiren_Liou/pen/JjWNVrQ
-->

<!-- 24: Yi Chieh
codepen: https://codepen.io/Yi-Chieh/pen/abJWrqm
-->

<!-- 25: peter.chen1024
codepen: https://codepen.io/JIAN-RONG/pen/VwpbJaB?editors=1010
-->

<!-- 26: Larry
codepen: https://codepen.io/manpower0708/pen/wvJdVwz
-->

<!-- 27: Amber
codepen: https://codepen.io/amberTing/pen/LYWLYzB
-->

<!-- 28: Dah
codepen: https://codepen.io/hua0124/pen/gOmRbaP?editors=1111
-->

<!-- 29: Alicia Lo
codepen:https://codepen.io/dkcyhyre/pen/dyvRPjY
-->

<!-- 30: tim Chou
codepen:https://codepen.io/tim-chou/pen/gOmRPmM?editors=1010
-->

<!-- 31: Ted Kuo
https://codepen.io/TedKuo/pen/mdWwVzO
-->

<!-- 32: Wendy Li
codepen: https://codepen.io/rockayumitw/pen/bGqRpVM
-->

<!-- 33: Fred Chang
https://codepen.io/fred8196/pen/QWpgEPG
-->

<!-- 34：RitaHunag
https://codepen.io/Rita-Rossweisse/pen/JjWJGmP
-->

<!-- 35: Jack
https://codepen.io/yxzzktmb/pen/KKWqaPK?editors=1010
-->

<!-- 36: Ed Huang
https://codepen.io/yide1986/pen/LYWLywz
-->

<!-- 37: Sec
codepen: https://codepen.io/Sentiments/pen/gOmRRyO?editors=1010
-->
<!-- 38: allen Chou
codepen: https://codepen.io/eepson123tw/pen/YzZQLYP
-->

<!-- 39: Jessie Cheng
codepen: https://codepen.io/eepson123tw/pen/YzZQLYP
-->

<!-- 40: Ethan
codepen: https://codepen.io/blazer030/pen/LYWLrNG
-->

<!-- 41: Eason
codepen: https://codepen.io/alanwu0828/pen/LYWLGvp
-->

<!-- 42: Jay
codepen: https://codepen.io/jayredk/pen/ExWXOXX
-->

<!-- 43: YOYO
codepen: https://codepen.io/lumedkle/pen/eYvWXLe?editors=1111
-->

<!-- 44: Eyan
https://codepen.io/somebody1997/pen/BaWdmyq?editors=1010
-->

<!-- 45: Chiang
https://codepen.io/ChiangJ/pen/RwpLWPj
-->

<!--46: jimmyFang
https://codepen.io/pohxiqqo/pen/poeWRdz
-->

<!-- 47: Valerie
https://codepen.io/vicky-chang/pen/vYxemvx?editors=1010
-->

<!-- 48: AlvinChu
https://codepen.io/wave99487chu/pen/WNpZVRv
-->

<!-- 49: 圈圈
https://codepen.io/wei-the-lessful/pen/XWMzMGZ
-->

<!-- 50: Stacey Huang
https://codepen.io/staceyhuang/pen/ExWoxGK
-->

<!-- 51: twoz，比較喜歡上面大大第三種寫法
https://codepen.io/twoz/pen/vYxdLrr?editors=1010
-->
<!-- 52: moitw
https://codepen.io/tsuifei/pen/rNyEZev?editors=1111
-->