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

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

請先閱讀完 [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://codepen.io/znlcgmgk/pen/ExZdBXr?editors=1010
-->

回報區
---
| 報數 | 組別/名字 | codepen / 其他回饋 |
|:--------:| -------- | -------- |
|1|Evan Chiang| https://codepen.io/piskesocute/pen/VwMJbrN|
|2| 肉鬆 | https://codepen.io/klrkicog/pen/PoJrmQP?editors=1010 |
|3| Larry | https://codepen.io/larrylinr5/pen/wvrLdpG?editors=1010 |
|4| Iris Huang | https://codepen.io/ythuang/pen/QWqXvRq |
|5|威爾|https://codepen.io/WILL_Wu/pen/dyVBWmL|
|6|Jason Chen|https://codepen.io/jason60810/pen/poWXPGp |
|7|黑川| https://codepen.io/kurokawa/pen/PoJrjpm |
|8|kevinhes|https://codepen.io/kevinhes/pen/ExwBmOd?editors=1010 |
|9|Jhen|https://codepen.io/cheng-jhen/pen/PoJrjjj |
|10|CloThEs | https://codepen.io/bogwdnxx-the-sans/pen/qBPzmoL|
|11|POPEYE | https://codepen.io/popeye_ux/pen/ZEXdKdR|
|12|Himi|https://codepen.io/Himi/pen/wvrLemy|
|13|Empty Wu|https://codepen.io/emptywu/pen/NWaZgJL |
|14|YC|https://codepen.io/YCLu/pen/OJxegeZ |
|15|Gill|https://codepen.io/Gill-Chin/pen/ZEXdyyV?editors=1010 |
|16|Howard|https://codepen.io/yawdnhbm/pen/ExwBXqV|
|17|Wenfish|https://codepen.io/wenfisht/pen/WNZqjKp|
|18| Karen Huang | https://codepen.io/Coding_Snorlax/full/WNZqErP |
|19| Pei Ying | https://codepen.io/Pei-Ying/pen/GRMbvmB?editors=1010|
|20|Elaine Liu|https://codepen.io/elaine7598/pen/BawgZxJ|
|21|群嘉|https://codepen.io/efzdamnp-the-lessful/pen/YzroxoJ?editors=1010|
|22|Sheep| https://codepen.io/SheepNDW/pen/mdBZMZv |
|23|Yunei|https://codepen.io/Yunei/pen/zYEVEKp|
|24|Bella Shya|https://codepen.io/BellaXie/pen/oNGrGeJ?editors=1010|
|25|Aaron Tu|https://codepen.io/aarontu/pen/QWqXqPM|
|26|Arista|https://codepen.io/arista-hsieh/pen/qBPzVbe|
|27|Liu| https://codepen.io/feng-chi-liu/pen/gOGNXwg?editors=1010 |
|28|Anna|https://codepen.io/kycrleao/pen/wvrLPMe?editors=1010|
|29|Tim Lin|https://codepen.io/TimmyLin/pen/KKXjyxr|
|30|andersonshen| https://codepen.io/luxyenni-the-bold/pen/VwMJrxK |
|31|Henry| https://codepen.io/kaohenry9287/pen/rNGEYOQ |
|32|陳暐中| https://codepen.io/wei-z/pen/BawgmgV?editors=1010 |
|33|Dobe|https://codepen.io/lisebee/pen/84a483a59f2c2cea213ff71bd79f80f5?editors=1010|
|34|Calon|https://codepen.io/Calon0118/pen/gOGNorz|
|35|Charlotte Lee| https://codepen.io/charlotte-lee/pen/YzroEdZ?editors=1010 |
|35|卡丘| https://codepen.io/OneKwei/pen/QWqXaNo |
|36|Henry Wu| https://codepen.io/dkcmlaww-the-flexboxer/pen/WNZqdXq?editors=1010 |
|37| Kelvin Hsu | https://codepen.io/kelvin001/pen/wvrLpmZ?editors=1010 |
|38| 黃士桓 | https://codepen.io/shr-huan-huang/pen/MWEMQVO?editors=1010 |
|39| Judy ☻ | https://codepen.io/hsiaohan/pen/LYzKQmq?editors=1010|
|40|曾傳文|https://codepen.io/rick917jp6/pen/vYeqryP
|41|有廖先生(Rain)|https://codepen.io/billpop741/pen/rNGEJJJ|
|42|mei|https://codepen.io/Shila-Chen/pen/YzrodRv|
|43| 咖咖 | https://codepen.io/gon790219/pen/LYzKrJa |
|44| AllenW | https://codepen.io/AllenW/pen/vYeqmbE?editors=1010
|45|kk|https://codepen.io/potatokaka/pen/WNZVvMx?editors=1000|
|46|tingyu| https://codepen.io/dgltu/pen/Jjrgdgx?editors=1011 |
|47|shio| https://codepen.io/shioyen/pen/NWaQGXX?editors=1010 |
| 48 | Sihle Huang | https://codepen.io/bugbug777/pen/poWXPar |
|49|小K|https://codepen.io/kelen1995/pen/PoJrOXE|
|50|肉桂卷|https://codepen.io/ginnlee/pen/gOGVgar?editors=1010|
|51|Yummyniya|https://codepen.io/yummyniya/pen/zYEgrbN|
|52|紙飛機|https://codepen.io/paperplanea/pen/zYEgKNv |
|53|我是泇吟|https://codepen.io/kljuqbxs/pen/VwMoGLm|
|54|Scottie|https://codepen.io/wow767t/pen/MWOgaWE?editors=1010|
|55|Jasper|https://codepen.io/li-jasper/pen/gOXYLaB |
|56|Yuan|https://codepen.io/yuanluo13542/pen/XWzrKZx?editors=1010 |
|57|Terry21|https://codepen.io/feng0409/pen/LYOPbvg?editors=1010 |
|58|Gui|https://codepen.io/guitimliu/pen/JjOPWNG|
|59|Benson|https://codepen.io/soul81624/pen/qBVWrdd|
|60| Otis | https://codepen.io/humming74/pen/ZEazKPy?editors=1010 |
|61|Vicky|https://codepen.io/hyxfish27/pen/QWOLgKp|
|62|Bonnie|https://codepen.io/bonnieli1414/pen/bGYbMRM?editors=1011 |
|63|dOvOb|https://codepen.io/gezzgrwj-the-styleful/pen/gOXYpYB?editors=1010
|64|nora-end|https://codepen.io/nora-shu/pen/yLPBWrV?editors=1010|
|65|Jerry|https://codepen.io/rteyfwwd-the-scripter/pen/KKyPjLQ|
|66|AKI|https://codepen.io/akichen27/pen/GRORqBp |
|67|柴貓|https://codepen.io/shibacat/pen/wvPverG |
|68|阿劍| https://codepen.io/seonkuraito/pen/bGozpyz |
|69|Steven Chan|https://codepen.io/Steven1220/pen/podvKoq?editors=1010 |
|70|DDDDK|https://codepen.io/dkklee/pen/YzEPjdM |
|71|阿武|https://codepen.io/samwnkyat/pen/abVOEqP
|72|ShaoYu|https://codepen.io/shaoyukao/pen/ExbjEQv|
|73|FuChang|https://codepen.io/fuchang830714/pen/ZEXgbZZ|
|74|JD孟璁|https://codepen.io/oikdkmxq-the-looper/pen/XWzXGKr?editors=1010|
|75|hua|https://codepen.io/hahahazzz123/pen/ZEaWZjB?editors=1111|
|76|ZY Hsu|https://codepen.io/zihyin/pen/dyZvzyB?editors=1010|
|77|andyii|https://codepen.io/gultrotpybyvue/pen/wvPPegP|
|78|Hedy|https://codepen.io/hhhsuan41/pen/YzEaYLN?editors=1010|
|79| Mylène | https://codepen.io/hamajibashi/pen/MWOZjwM |
|80|大衛| https://codepen.io/exnsrpjc/pen/GRyqaxE?editors=1011|
|81|Carol Li|https://codepen.io/carolli834/pen/OJvdvyR?editors=1010|