---
tags: JavaScript 實戰班, Day20
---

# 設計魔劍三組

## 7/3：Day 20

小美與小明在真心鎮的郊外，深知此地不能久留，所以決定使用 Vue 的能力創建個人資料表單，並打算使用新的身份離開這個傷心地...

小明：漂亮阿姨，相信我們還會再相見...

任務：

- 閱讀 v-model 表單的課前[預習章節](https://hackmd.io/@hexschool/S1DJeKTdL/%2Fjum_IOrASCWevidlnIAsOg)
- 完成表單功能並將小明賦予上新的身份吧

測驗：https://codepen.io/Wcc723/pen/xxZLBMR?editors=1010
---

### Yoyo

<iframe height="265" style="width: 100%;" scrolling="no" title="Vue v-model" src="https://codepen.io/notte-the-lessful/embed/rNxpqNL?height=265&theme-id=light&default-tab=html,result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/notte-the-lessful/pen/rNxpqNL'>Vue v-model</a> by notte
(<a href='https://codepen.io/notte-the-lessful'>@notte-the-lessful</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

> 助教回覆：作業做的很好哦，正確使用 v-model 的功能幫小明重生呢 :+1:
我的技能列表，也可以使用 v-for 製作喔，詳細可參考這個範例
https://codepen.io/rider159159/pen/yLeKbwe

---

### ClareDes.
<iframe height="265" style="width: 100%;" scrolling="no" title="Vue v-model" src="https://codepen.io/ClareDes/embed/ZEQrRyQ?height=265&theme-id=dark&default-tab=html,result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/ClareDes/pen/ZEQrRyQ'>Vue v-model</a> by ClareDes.
(<a href='https://codepen.io/ClareDes'>@ClareDes</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

> 助教回覆：作業做的很好哦，正確使用 v-model 的功能幫小明重生呢 :+1:

### ClareDes.｜Day18(7/1)補交
<iframe height="265" style="width: 100%;" scrolling="no" title="Vue v-for" src="https://codepen.io/ClareDes/embed/PoZQaby?height=265&theme-id=dark&default-tab=js,result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/ClareDes/pen/PoZQaby'>Vue v-for</a> by ClareDes.
(<a href='https://codepen.io/ClareDes'>@ClareDes</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
> 助教回覆：

### ClareDes.｜Day19(7/2)補交
<iframe height="265" style="width: 100%;" scrolling="no" title="Vue v-on" src="https://codepen.io/ClareDes/embed/YzwevZa?height=265&theme-id=dark&default-tab=html,result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/ClareDes/pen/YzwevZa'>Vue v-on</a> by ClareDes.
(<a href='https://codepen.io/ClareDes'>@ClareDes</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
> 助教回覆：

> 助教回覆：作業做的很好哦，以上補繳的作業都很正確唷 :+1:

---