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

# 設計魔劍三組

## 6/30：Day 17

簡單的幾個術式雖可以阻擋一些前來的警力，但小美預先準備的大括號 `{{ }}` 數量不夠，所以接下來難以用相同方式產生阻礙。

小美：接下來需要就地取材了...

小明：就地取材!?

#### 任務：

- 閱讀 [v-bind](https://hackmd.io/@hexschool/S1DJeKTdL/%2FdxbCu6YTTh2q-Z0p1vWSjw) 的章節
- 將資料中的圖片網址加入到 img 標籤，圖片 imgAlt 則加入到 alt 屬性上（可使用縮寫 `:` 的形式）
- 將內層的 div 標籤加上動態切換的 class 屬性，條件為 `isChecked` ，className 為 .river

測驗：https://codepen.io/Wcc723/pen/QWyMYza

#### 繳交作業說明：

請 fork 課程中所提供的 Codepen，並以 iframe 的方式內嵌於團隊內的 HackMD


iframe 範例（同上，選擇右下方的 Embed 的 iframe 選項）

<iframe height="265" style="width: 100%;" scrolling="no" title="Vue 將資料呈現於畫面上" src="https://codepen.io/Wcc723/embed/jOWLdeZ?height=265&theme-id=light&default-tab=js,result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/Wcc723/pen/jOWLdeZ'>Vue 將資料呈現於畫面上</a> by Wcc723
(<a href='https://codepen.io/Wcc723'>@Wcc723</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

#### 學習重點

- 著重在 Vue 的 **語法認識**
- 運作的觀念會在直播課程中做介紹

---
### Ryan

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

> 助教回覆：作業做的很好哦， v-bind 、 v-model 的設定很正確 :+1:
>

---
### Vivian Chiang

<iframe height="265" style="width: 100%;" scrolling="no" title="Vue 動態屬性" src="https://codepen.io/vivian820225/embed/jOWabJQ?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/jOWabJQ'>Vue 動態屬性</a> by Vivian Chiang
(<a href='https://codepen.io/vivian820225'>@vivian820225</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

> 助教回覆：作業做的很好哦， v-bind 、 v-model 的設定很正確 :+1:
>

---