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

# 設計魔劍三組

## 7/1：Day 18

在越過幾個路口後，警力居然還可以不斷的出現，區區一個亂匯款應不會造成這麼麻煩的結果，但在危機時刻，小美已經沒辦法思考這麼複雜的問題。

小美：你的手遊抽卡運氣如何？

小明：非洲人是我

小美：不管了，非洲過去就是歐洲，試著將抽出的卡片釋放出來吧

#### 任務：

- 閱讀 v-for 的[課前預習](https://hackmd.io/@hexschool/S1DJeKTdL/%2FKWXW13ewTaq2M_svlEAYXA)：
- 將 data 內的英雄卡片呈現於畫面上（請一定要加入 :key 才算完成任務）

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

---

### Yoyo

### 補交 6/30

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

> 助教回覆：作業做的很好哦，寫的很正確 :+1:

### 7/1

<iframe height="265" style="width: 100%;" scrolling="no" title="Vue v-for" src="https://codepen.io/notte-the-lessful/embed/KKVyXQW?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/KKVyXQW'>Vue v-for</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-for 、 v-bind 使用的很正確 :+1:

---

### Vivian Chiang

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

> 助教回覆：作業做的很好哦，v-for 、 v-bind 使用的很正確 :+1:
>

---

### ClareDes.｜Day16(6/29)補交

測驗一
<iframe height="265" style="width: 100%;" scrolling="no" title="Vue 將資料呈現於畫面上" src="https://codepen.io/ClareDes/embed/pogdQMq?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/pogdQMq'>Vue 將資料呈現於畫面上</a> by ClareDes.
(<a href='https://codepen.io/ClareDes'>@ClareDes</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

測驗二
<iframe height="265" style="width: 100%;" scrolling="no" title="Vue 創建資料" src="https://codepen.io/ClareDes/embed/eYJeQqw?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/eYJeQqw'>Vue 創建資料</a> by ClareDes.
(<a href='https://codepen.io/ClareDes'>@ClareDes</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

> 助教回覆：作業做的很好哦，寫的很正確 :+1:
>

### ClareDes.｜Day17(6/30)補交
<iframe height="265" style="width: 100%;" scrolling="no" title="Vue 動態屬性" src="https://codepen.io/ClareDes/embed/GRoOPpO?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/GRoOPpO'>Vue 動態屬性</a> by ClareDes.
(<a href='https://codepen.io/ClareDes'>@ClareDes</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

> 助教回覆：作業做的很好哦，寫的很正確 :+1:
>

---
### Ryan

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

> 助教回覆：作業做的很好哦，v-for 、 v-bind 使用的很正確 :+1:
>
---