---
# System prepended metadata

title: "\U0001F3C5 5/21 (五) 每日任務 Day 20"
tags: [Vue 直播班 - 2021 夏季班]

---

# 🏅 5/21 (五) 每日任務 Day 20
###### tags: `Vue 直播班 - 2021 夏季班`

請先閱讀完 [v-model 的課前預習](https://hackmd.io/@hexschool/S1DJeKTdL/%2Fjum_IOrASCWevidlnIAsOg) 再嘗試作答:

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

> 1. 請同學使用 v-model, v-bind, v-for 的概念完成練習，填寫上方的表單將可以同步更新下方 ul 的資料。
> 2. 選項的 label for、input id 需要互相對應。
> 3. Q2, Q3, Q4 的選項需要用 v-for 呈現。
> 4. Q5 的部分只需要用一個 checkbox, 並會在 true, false 之間做切換。 

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


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

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

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

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

<!-- 解答
https://codepen.io/znlcgmgk/pen/ExZdBXr?editors=1010
-->

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

<!--:Jasmin
codepen:https://codepen.io/thejasmin/pen/ExWZEzB?editors=1010
-->

<!-- 3:Allen Chou
codepen:https://codepen.io/eepson123tw/pen/bGqgvjr?editors=1011
-->

<!-- 4:小魚
codepen:https://codepen.io/jarvis1993/pen/MWpJVPB
-->

<!-- 5:Vic
codepen:https://codepen.io/hsuan333/pen/poeRLmZ
-->

<!-- 6: Alysa Chan
codepen: https://codepen.io/alysachan/pen/eYvgMob?editors=1001
-->
<!-- 7:陳sam
codepen:https://codepen.io/euldpliv/pen/OJpWvGg?editors=1010
-->

<!-- 8:Lina Chen
codepen:https://codepen.io/LinaChen/pen/ZEeLxVq
-->

<!-- 9:Ethan
codepen: https://codepen.io/blazer030/pen/MWpJGwZ
-->

<!-- 10: Sec
codepen: https://codepen.io/Sentiments/pen/VwpPXJa?editors=1010
-->

<!-- 11: Iva Hsu
codepen: https://codepen.io/Hsu1Fang/pen/dyvNeYX
-->

<!-- 12: Wendy Li
codepne: https://codepen.io/rockayumitw/pen/OJpWZmQ?editors=1010
-->
<!-- 13: LiShang
codepne: https://codepen.io/li-shang/pen/ExWZLXj
-->

<!-- 14: Yiren
codepne: https://codepen.io/Yiren_Liou/pen/WNpRJLm
-->

<!-- 15: harold 
codepen: https://codepen.io/YuWin0805/pen/WNpRzPd
-->

<!--  16: Echo Hui
codepen: https://codepen.io/echohuiecho/pen/bGqgMPZ -->

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

<!--  18: yijun
codepen: https://codepen.io/sandy3068/pen/oNZByYE -->

<!-- 19: youting  
codepen: https://codepen.io/youtingluo/pen/eYvgKEg?editors=1010
-->

<!-- 20: YOYO
codepen: https://codepen.io/lumedkle/pen/eYvgKrW
-->

<!-- 21: Yi Chieh
codePen: https://codepen.io/Yi-Chieh/pen/LYWxrEz
-->

<!-- 22: Dah
codePen: https://codepen.io/hua0124/pen/zYZNaLP?editors=1010
-->

<!-- 23: Yu Sung
codePen: https://codepen.io/kevin-hsu-the-encoder/pen/BaWpPWL?editors=1010
-->

<!-- 24: Tori
codePen: https://codepen.io/hayen/pen/BaWNVox?editors=1000
-->

<!-- 25: Alvin Chu
codepen:https://codepen.io/wave99487chu/pen/OJpWwqm
-->

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

<!-- 27: Joe Kuo
codepen:https://codepen.io/alertislow/pen/KKWaxLO?editors=1010
-->

<!-- 28: Erica
https://codepen.io/ericadu/pen/NWpdzqV
-->

<!-- 29: Jay
codepen: https://codepen.io/jayredk/pen/rNyjqzy?editors=1010
 -->

<!-- 30: jimmyFang
codepen: https://codepen.io/pohxiqqo/pen/gOmgQyg
  -->
  
<!-- 31: 李重炫
codepen: https://codepen.io/otherway1123/pen/VwpPVqL?editors=1010
  -->
  
  <!-- 32:  WuJungHan
codepen: https://codepen.io/JungHanWu/pen/PopWawx?editors=1010
  -->

<!-- 33: 阿倫
codepen:https://codepen.io/jason5125122/pen/BaWpVRe
-->

<!-- 34: Tofu Tseng
https://codepen.io/Tofutseng/pen/yLMgZwM
-->

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

<!-- 36: Ted Kuo
codepen: https://codepen.io/TedKuo/pen/QWpdzwr
-->

<!-- 37: Tim Chou
codepen: https://codepen.io/tim-chou/pen/ZEeezvB?editors=1011
-->

<!-- 報數38： RitaHuang
CodePen：
https://codepen.io/Rita-Rossweisse/pen/MWppWGV?editors=1010
-->

<!-- 報數39： leolee
CodePen：
https://codepen.io/nekorice/pen/dyvvpNM
-->

<!-- 報數40： Oober
CodePen：
https://codepen.io/xtsjrjdv/pen/poeePvM?editors=1010
-->

<!-- 報數41： 林晉
CodePen：
https://codepen.io/linchinhsuan/pen/bGqqqjj?editors=1010
-->

<!-- 42: Izumi 泉
codepen:
https://codepen.io/izumi-dev/pen/GRWqLxe
-->

<!-- 43: Jessie Cheng
codepen:
https://codepen.io/JessieMosbi/pen/dyvvZGw
-->

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

<!-- 45: Stacey Huang
https://codepen.io/staceyhuang/pen/zYZZRKK?editors=1010
-->
<!-- 46:Wel
https://codepen.io/uwhhiaxx/pen/LYWWOBo?editors=1010
-->

<!-- 47:twoz
https://codepen.io/twoz/pen/BaWWJYY?editors=1010
-->

<!-- 48: Amber
https://codepen.io/amberTing/pen/KKWWGwL?editors=1010
-->

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

<!-- 50: Fred Chang
https://codepen.io/fred8196/pen/vYxxbra?editors=1010
-->

<!-- 51: Amanda Chiang
https://codepen.io/cym199922/pen/vYxmGJd?editors=1000
-->

<!-- 52: MM
https://codepen.io/MINN3/pen/GRWmNVz
-->

<!-- 53: Chiang
https://codepen.io/ChiangJ/pen/GRWMJQm?editors=1010
-->

<!-- 54: 圈圈
https://codepen.io/wei-the-lessful/pen/abJVJOw
-->
