---
# System prepended metadata

title: "\U0001F3C5 Day 20 - Vue 指令練習 3"
tags: [Vue 直播班 - 2022 冬季班]

---

---
tags: Vue 直播班 - 2022 冬季班
---
# 🏅 Day 20 - Vue 指令練習 3

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

題目 
---
操作 [這個模板](https://codepen.io/hexschool/pen/ZERMgEE?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)


## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔! 
解答位置請參考下圖（需打開程式碼的部分觀看）

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

解答：  

https://codepen.io/hexschool/pen/mdKGNdX?editors=1010





回報區
---


|     Discord      |                                CodePen / 答案                                |
|:----------------:|:----------------------------------------------------------------------------:|
|       ...        |                                     ...                                      |
|    Kimi#9564     |              [CodePen](https://codepen.io/kimihu91/pen/xxJwjGm)              |
|   Wendy3#5615    |              [Codepen](https://codepen.io/wendy03/pen/KKBNmoq)               |
|    冬天#5215     |              [CodePen](https://codepen.io/winter_/pen/zYLowWL)               |
|     威0#6919     |      [codepen](https://codepen.io/n0918679182/pen/NWBbjMd?editors=1010)      |
|    RJRS#9430     |                [CodePen](https://codepen.io/RJRS/pen/wvxodRg)                |
|   ChloeLo#4858   |              [CodePen](https://codepen.io/chloelo/pen/xxJRdzQ)               |
|    yuyu#6310     |       [CodePen](https://codepen.io/yuyu0905/pen/WNKojaj?editors=1010)        |
|   PayRoom#8328   |             [CodePen](https://codepen.io/water38198/pen/KKBNmrX)             |
|   楊苡安#2752    |      [CodePen](https://codepen.io/yi-an-yang/pen/mdjOmve?editors=1010)       |
|   MotoRin#2616   |       [CodePen](https://codepen.io/sakimoto/pen/poZNPOd?editors=1011)        |
|   AuroraC#6539   |        [codepen](https://codepen.io/AuroraC/pen/KKBNmYZ?editors=1010)        |
|  Jill Lee#0809   |     [CodePen](https://codepen.io/chi-ling-lee/pen/bGjBRGR?editors=1010)      |
|    albee#9121    |      [Codepen](https://codepen.io/albee-chang/pen/jOpVmvL?editors=1010)      |
|   法希娜#3206    | [Codepen](https://codepen.io/yiiserpf-the-encoder/pen/poZNPBa?editors=1010)  |
|       aki        |               [codepen](https://codepen.io/aki168/pen/MWBwvWX)               |
|    ㄚ翔#8126     |    [codepen](https://codepen.io/engineerjohnson/pen/eYjBRpQ?editors=1010)    |
|    大頭#8116     |       [codepen](https://codepen.io/d22495521/pen/vYayZgK?editors=1010)       |
|    kuku#3118     |            [Codepen](https://codepen.io/mengting-ku/pen/ZEjpdLw)             |
|   Benson#6763    |              [Codepen](https://codepen.io/kumashow/pen/JjBbJyo)              |
|  LHchien33#6232  |             [Codepen](https://codepen.io/lin_chien/pen/xxJRrrK)              |
|     Wei#2330     |     [Codepen](https://codepen.io/ixfjxrbo-the-typescripter/pen/GRBNEwM)      |
|    JackC#0411    |              [Codepen](https://codepen.io/key0329/pen/OJwbgXm)               |
|    圈圈#4060     |   [Codepen](https://codepen.io/wjejfczn-the-bold/pen/LYBbLjp?editors=1010)   |
|    威爾#1694     |              [CodePen](https://codepen.io/WILL_Wu/pen/bGjBRjM)               |
|    Alex#9978     | [CodePen](https://codepen.io/datsxzqg-the-selector/pen/zYLozLO?editors=1010) |
|  mandylai#4055   |            [CodePen](https://codepen.io/mandy-lai-2/pen/xxJRdeB)             |
|    RyanC#6960    |        [CodePen](https://codepen.io/RyanYD/pen/PoBbjBO?editors=1010)         |
|    RainJ#3480    |             [CodePen](https://codepen.io/RainJCode/pen/ZEjByvP)              |
|  LinaChen#1796   |              [CodePen](https://codepen.io/LinaChen/pen/zYLozgv)              |
|   魚子醬#5220    |              [CodePen](https://codepen.io/haihsuan/pen/zYLodqq)              |
|  masterYan#2480  |  [CodePen](https://codepen.io/htzwgoqt-the-looper/pen/BaPQdrb?editors=1010)  |
|    Hilda#7085    |         [CodePen](https://codepen.io/vwquikad-the-vuer/pen/vYayJWj)          |
|   KC_8685#9343   |             [Codepen](https://codepen.io/cathy7411/pen/BaPQZQd)              |
|  kenki100#0068   |               [Codepen](https://codepen.io/ken100/pen/RwBoVdP)               |
|    azami#5986    |               [Codepen](https://codepen.io/azami/pen/mdjOMaa)                |
|  老皮博士#8050   |        [Codepen](https://codepen.io/li0406/pen/KKBNvEV?editors=1010)         |
|    薯餅#3581     |           [Codepen](https://codepen.io/ColdingPoTaTo/pen/rNrWzeO)            |
|   Cheryl#4007    |      [Codepen](https://codepen.io/Cheryl-Hsu/pen/yLqVoZJ?editors=1010)       |
|    泊岸#3466     |      [Codepen](https://codepen.io/qoq77416416/pen/wvxodLJ?editors=1010)      |
|   Wendy77#8049   |              [Codepen](https://codepen.io/Wendy__/pen/oNMYeoo)               |
|     int#7518     |       [Codepen](https://codepen.io/intHuang/pen/JjBbyRW?editors=1010)        |
|   小木馬#8760    |       [Codepen](https://codepen.io/wmmtbcsd/pen/gOjLxEE?editors=1010)        |
|    Rana#6249     |            [Codepen](https://codepen.io/aureate0116/pen/wvxorKB)             |
|   popeye#5081    |             [Codepen](https://codepen.io/popeye_ux/pen/eYjBGWe)              |
|  jimmyFang#9575  |              [Codepen](https://codepen.io/pohxiqqo/pen/ExpNwop)              |
| jacky010080#0880 |     [CodePen](https://codepen.io/Yen-Jung-Chen/pen/bGjBRMM?editors=1010)     |
|    無名#6427     |              [CodePen](https://codepen.io/Nomoney/pen/KKBMvMV)               |
|    阿異#4776     |             [CodePen](https://codepen.io/yani21399/pen/GRBNOYM)              |
| PeihanWang#2530  |      [CodePen](https://codepen.io/PeihanWang/pen/vYaymqO?editors=1010)       |
| 出事了阿伯#9923  |      [CodePen](https://codepen.io/BradpittLai/pen/qByqVwN?editors=1010)      |
| Yuna Huang#2692  |              [CodePen](https://codepen.io/Yuna1002/pen/oNMYojN)              |
| 阿榮#8277|[CodePen](https://codepen.io/mogzbvfl-the-reactor/pen/WNKoOWY)|
| 黑白兔#0684|[CodePen](https://codepen.io/johnny329/pen/JjBbpJa)|
| 心幻羽#0056|[CodePen](https://codepen.io/linglingsyu/pen/zYLoRyJ?editors=1010)|
| Ruby Chen#7452|[CodePen](https://codepen.io/ruby92429/pen/KKBNQaa?editors=1010)|
| DIO大人#4776|[CodePen](https://codepen.io/oscar-2283/pen/JjBEdBm)|
|Peng#9811|[codepen](https://codepen.io/peng-027/pen/rNrWENZ)|
| CatBoxy#4207 |[CodePen](https://codepen.io/nekoboxy/pen/JjBbJZY)|
|SASIMI#5099|[Codepen](https://codepen.io/sashimi1327/pen/LYBxEQj)|
|shiuan#4721|[codepen](https://codepen.io/prankaChang/pen/wvxgKOm?editors=1010)|
|Amberhh#2465|[codepen](https://codepen.io/Amberhh/pen/jOpVYjW?editors=1010) |
|JY#5712|[Codepen](https://codepen.io/judy_123/pen/QWBddGO)|
|Bella_#1587|[Codepen](https://codepen.io/Chen-Bella/pen/poZRwXq)|
Zack_P#1805|[Codepen](https://codepen.io/tmzazirh-the-animator/pen/RwBKjPN)|
|suihsilan#9485|[Codepen](https://codepen.io/suihsilan/pen/JjBEvwN?editors=1010)|
|大衛#4869|[Codepen](https://codepen.io/exnsrpjc/pen/PoBbjob)|
|ViNci#4273|[Codepen](https://codepen.io/ViNciSyo/pen/wvxgXBb)|
|Winnie#1306|[Codepen](https://codepen.io/WinnieWuWinnie/pen/poZRZOZ?editors=1010)|
|柔柔#1716|[Codepen](https://codepen.io/rouchen/pen/dyjNqez?editors=1010)|
|竹輪#3335|[Codepen](https://codepen.io/chikuwa0120/pen/rNrjQrP)|
|Hironaka#7367|[Codepen](https://codepen.io/Hironaka0815/pen/rNrjRyZ?editors=1010)|
|Silvialu#4521|[Codepen](https://codepen.io/Silvia091640/pen/yLqggbE)|
|柚子#3958|[Codepen](https://codepen.io/as6625998/pen/rNrjEVv?editors=1010)|
|Fang#4680|[Codepen](https://codepen.io/std95174/pen/rNrjEZo)
|yoyo#1003|[Codepen](https://codepen.io/pen/eYjvdVO)|
|Curtis#4780|[Codepen](https://codepen.io/curtislin/pen/abjJBzJ?editors=1010)|
|MengLin#3001|[codepen](https://codepen.io/aacj2642/pen/LYBWxqY?editors=1010)|
|Paul#7426|[CodePen](https://codepen.io/paul-1997/pen/oNMZWYE?editors=1010)|
|Asher Xu#9297|[CodePen](https://codepen.io/kirakira72/pen/ZEjBXYK)|
|YI#0863|[CodePen](https://codepen.io/YI0305/pen/poZemzM?editors=1011)|
|阿沁#8176|[CodePen](https://codepen.io/a8322342/pen/ExpmxBM?editors=1010)|
|enolachen#8031|[CodePen](https://codepen.io/Chen-Enola/pen/zYLZaQp)|
|Hazel.#6020|[CodePen](https://codepen.io/Hazelhsieh/pen/BaPLEwE?editors=1011)|
| Jenny真#7532 | [CodePen](https://codepen.io/wei-chen-wu/pen/NWBgNde?editors=1010) |Cookie SSS#6991https://codepen.io/sqhjikpa-the-selector/pen/ZEjXmoW?editors=1010|
|GOD_QWERTYUIOPLKJLKLLOINJ_MASTER#4922|[CodePen](https://codepen.io/sho666/pen/yLqpLyG?editors=1011)|
|Yiru#0236|[Codepen](https://codepen.io/yiru94/pen/ZEjKYBw?editors=1010)|
|Tuhacrt#0008|[codepen](https://codepen.io/Tuhacrt/pen/mdjLzvg)|
|周周#3503|[Codepen](https://codepen.io/jhoujhou-the-decoder/pen/oNMyrRr?editors=1010)|
|ABOOS#6276|[Codepen](https://codepen.io/guhungyin/pen/XWBBBrp)|
|阿蘇#8531|[Codepen](https://codepen.io/susu3131/pen/VwBREpE?editors=1010)|
|hungya#0773|[Codepen](https://codepen.io/hungya777/pen/PoBroxZ?editors=1010)|
|popcorn_3q#9893|[Codepen](https://codepen.io/arnyrpqt-the-sasster/pen/GRXpBVv?editors=1010)|
|Eason#7884|[Codepen](https://codepen.io/ASLEO/pen/eYPNRGd)|
|yaru#6308|[Codepen](https://codepen.io/gwen4637/pen/eYjBRWx)|
