---
tags: Vue 直播班 - 2023 冬季班
---
# 🏅 Day 17 - Vue 指令練習 v-bind

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

題目
---
請操作 [這個模板](https://codepen.io/hexschool/pen/PoadvXG?editors=1010)，執行以下要求（只能操作 HTML 的部分）：

* 請將 data 資料中的 imgUrl 綁定到 input 標籤的 value、img 標籤的 src ; 將 imgAlt 綁定到 img 標籤的 alt 上。

#### 額外挑戰
完成上述題目後，嘗試將 JS 區塊改為使用 Composition API 撰寫

## 回報流程

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


<!-- 解答：
<div id="app">
<div class="container p-3">
<div class="inputWrap mb-3">
<input type="text" :value="imgUrl" class="imgInput mb-3">
<img :src="imgUrl" :alt="imgAlt">
</div>
</div>
</div>
https://codepen.io/jmimiding4104/pen/oNmKwoo

額外挑戰：
https://codepen.io/jmimiding4104/pen/KKJOqyK
-->

回報區
---

| Discord | CodePen / 答案 |
|:----------:|:-------------------------------------------------------:|
| Yijing | [CodePen](https://codepen.io/Yi-Jing-71080635/pen/OJqXRmX?editors=1010) |
| Fabio20 | [CodePen](https://codepen.io/fabio7621/pen/abMZmGM?editors=1010) |
| JING | [CodePen](https://codepen.io/HSUANIN0327/pen/qBvNamv) |
| 風羽 | [CodePen](https://codepen.io/Joy-Huang/pen/gOEMwzw) |
| bf_tsai | [CodePen](https://codepen.io/BF-Tsai/pen/VwRjKXw?editors=1011) |
| Tippy | [CodePen](https://codepen.io/Ektodor-Wang/pen/BabzLxW) |
| 銀光菇 | [CodePen](https://codepen.io/genesynthesis/pen/zYbBKjy?editors=1010) |
| Ryann | [CodePen](https://codepen.io/csw8524/pen/JjzKRBQ) |
| Celine 510 | [CodePen](https://codepen.io/Celine-510/pen/WNmxGKZ) |
| Emily | [CodePen](https://codepen.io/Emily2089/pen/eYXzdob) |
| XinYu | [CodePen](https://codepen.io/HsuXinYu/pen/QWoEKXm?editors=1010) |
| Ann Chou | [CodePen](https://codepen.io/annchou_illu/pen/VwRjmwa) |
| Chia Pin | [CodePen](https://codepen.io/joker-cat/pen/XWGKNJw) |
| kj | [CodePen](https://codepen.io/Eero-Chiao/pen/GReqNJm) |
| cest_jessie | [CodePen](https://codepen.io/itsjessiechen/pen/GReqjar) |
| py | [CodePen](https://codepen.io/Wpypy/pen/BabzLbZ) |
|WeiRio|[CodePen](https://codepen.io/wei_wu/pen/wvOWozm?editors=1010)|
|FangFang|[CodePen](https://codepen.io/FangFang09/pen/qBvNqRb)|
|Eden|[Codepen](https://codepen.io/iseden/pen/KKEMNGL)|
|MDFK|[Codepen](https://codepen.io/maywang/pen/ExMygMz?editors=1010)|
| SHUO | [CodePen](https://codepen.io/xrzarxkl-the-reactor/pen/ExMyZWX?editors=1010) |
| dora | [CodePen](https://codepen.io/dorayu/pen/ZEPOLoe?editors=1010) |
| Uli | [CodePen](https://codepen.io/uli1313/pen/ExMyZRb?editors=1010) |
| macihuang | [CodePen](https://codepen.io/macy1215/pen/PoLzbjE) |
| PoRay | [CodePen](https://codepen.io/raycheng/pen/MWxeppr?editors=1010) |
| Moreene | [CodePen](https://codepen.io/Moreene/pen/qBvNrqg) |
| PoWei#8484 | [CodePen](https://codepen.io/harrison-wei-lai/pen/eYXzvgM) |
| jia yu | [CodePen](https://codepen.io/fjqxaznl-the-reactor/pen/RwdRpMW?editors=1010) |
| KUN. | [CodePen](https://codepen.io/barry91205/pen/vYPKgya) |
| Ariel | [CodePen](https://codepen.io/ariel0510/pen/LYaZywL) |
| 小夏 | [CodePen](https://codepen.io/michaelhsia/pen/eYXzWXN) |
| kawa | [CodePen](https://codepen.io/z83xji6/pen/JjzKJpp?editors=1010) |
| Ataraxia | [CodePen](https://codepen.io/ataraxia8888/pen/KKEMvKW) |
| 保羅 | [CodePen](https://codepen.io/paul-1997/pen/ZEPOJYX) |
| Winnie | [CodePen](https://codepen.io/codepen-io-winnie/pen/eYXzRZz?editors=1010) |
| RayRay | [CodePen](https://codepen.io/CityRay/pen/ExMyvRr) |
| Nelly | [CodePen](https://codepen.io/Nelly-Guo/pen/xxBOXXw?editors=1010) |
| sponge | [CodePen](https://codepen.io/biunpujm-the-flexboxer/pen/jOJrGKd?editors=1010) |
| WEI | [CodePen](https://codepen.io/wei-z/pen/RwdRjYv) |
| yu.t_liu | [CodePen](https://codepen.io/YuT200053/pen/NWJrwBP) |
| Eazy | [CodePen](https://codepen.io/Eazychen/pen/ExMybOo?editors=1010) |
| Ting | [CodePen](https://codepen.io/liara/pen/OJqXzyV) |
| Iris | [CodePen](https://codepen.io/iris831206/pen/eYXzyVK) |
| stone4584 | [CodePen](https://codepen.io/Royen0506/pen/PoLzEaG?editors=1010) |
| 熊大 | [CodePen](https://codepen.io/asiating/pen/NWJrXOv?editors=1010) |
| ⭐️小正 | [CodePen](https://codepen.io/colorgolden/pen/ExMyNKY) |
| chihyang | [CodePen](https://codepen.io/hike1707/pen/wvOWpQd) |
| MY | [CodePen](https://codepen.io/ahmomoz/pen/WNmxMjK) |
| Antonio | [CodePen](https://codepen.io/gwhvusel-the-builder/pen/GReqxZX) |
| nini1202desu | [CodePen](https://codepen.io/tvxq5206/pen/JjzKvKm?editors=1010) |
| Helen | [CodePen](https://codepen.io/milkteamonster/pen/mdoELjV?editors=1010) |
| Neil | [CodePen](https://codepen.io/Neil1024/pen/XWGKyQe?editors=1111) |
| Leo | [CodePen](https://codepen.io/Aruminiya/pen/WNmxWZp) |
| hedy | [CodePen](https://codepen.io/Hedy_H/pen/NWJrVmE?editors=1010) |
| Charlotte Lee | [CodePen](https://codepen.io/char849/pen/zYbBgge) |
|smalljie|[CodePen](https://codepen.io/smalljie/pen/bGZwNMg)|
|JUN_|[CodePen](https://codepen.io/Jun-L/pen/JjzRdWo?editors=1010)|
|ann6212|[CodePen](https://codepen.io/yqmegupa-the-styleful/pen/YzgGXbx)|
|MikeLin|[CodePen](https://codepen.io/MikeLin0701/pen/RwdGPmj)|
| Elena | [CodePen](https://codepen.io/elena0127abc/pen/NWJRGLK) |
| Yang | [CodePen](https://codepen.io/Yang-J/pen/xxBEwMp) |
| fanshu0303 | [CodePen](https://codepen.io/JuiHsuanLee0303/pen/zYbKKGp) |
| .zack_p | [CodePen](https://codepen.io/Designer-PH/pen/VwRKWZW?editors=1011) |
| PayRoom |[CodePen](https://codepen.io/water38198/pen/abMmLdr)
| runweiting | [CodePen](https://codepen.io/weiting14/pen/eYXdERe) |
| 精靈 | [CodePen](https://codepen.io/justafairy/pen/abMmEzE) |
| Vivian2857 | [CodePen](https://codepen.io/vivian_lin/pen/vYPXdmK?editors=1010) |
| haru | [CodePen](https://codepen.io/haru_portfoilo/pen/oNVzygv?editors=1010) |
| Tom | [CodePen](https://codepen.io/sp1daTomm/pen/NWJRzGv) |
| Rock | [CodePen](https://codepen.io/xiu43317/pen/qBvaMyL) |
| Chris | [CodePen](https://codepen.io/cjtseng07/pen/wvOzRvw) |
| hua | [CodePen](https://codepen.io/LHua/pen/LYaRKxW) |
| celinelinnn |[CodePen](https://codepen.io/celinephoebe/pen/xxBReJj)|
| 黃士桓 | [codePen](https://codepen.io/shr-huan-huang/pen/KKEadZE) |
| xuan | [codePen](https://codepen.io/xuan0915/pen/abMpdyL?editors=1010) |
| _amaaaa | [codePen](https://codepen.io/Alicia-Chu/pen/JjzEJqW?editors=1010) |
| 狸貓 | [CodePen](https://codepen.io/tanuki320/pen/MWxJBGM?editors=1010) |
| hsuhsusophie | [CodePen](https://codepen.io/hsuhsusophie/pen/wvOJJBY) |
| 貢波波夫 | [codePen]( https://codepen.io/mxgrfgcr-the-bashful/pen/wvOJdOg) |
| carrie | [codePen](https://codepen.io/echocarriet/pen/abMJygV)|
| jeremyChan | [CodePen](https://codepen.io/nudieisgood/pen/gOEWZYx?editors=1011) |
| 翔.Ben | [CodePen](https://codepen.io/energy95272z/pen/rNRmgXJ?editors=1111) |
| santu0868 | [CodePen](https://codepen.io/HatsumiSan/pen/KKEvgJE?editors=1010) |
| peggy | [CodePen](https://codepen.io/peggylai/pen/XWGaqXo?editors=1010) |
|yuling|[Codepen](https://codepen.io/igzdflpu/pen/vYPedqr)|
|Jim|[Codepen](https://codepen.io/asiahedh-the-encoder/pen/RwdLQKL?editors=1010)|
|關關| [CodePen](https://codepen.io/ashkuan/pen/xxBYWZZ) |
|WA| [CodePen](https://codepen.io/ldddl/pen/NWJVvbE) |
| yuan! | [CodePen](https://codepen.io/townyuan/pen/rNbOMRp) |

<!--

| user | [CodePen]() |

-->