---
# System prepended metadata

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

---

---
tags: Vue 直播班 - 2022 冬季班
---
# 🏅 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 上。


## 回報流程

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

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

<!-- 解答：  
<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>
-->




回報區
---


|   Discord    |                    CodePen / 答案                      |
|:----------:|:-------------------------------------------------------:|
| Wendy3#5615 |[Codepen](https://codepen.io/wendy03/pen/LYBZgEa)    |
|PayRoom#8328|[CodePen](https://codepen.io/water38198/pen/PoBzyqZ)|
|威0#6919|[codepen](https://codepen.io/n0918679182/pen/MWBePwr?editors=1010)|
|aki|[codepen](https://codepen.io/aki168/pen/NWBqgyb)|
|楊苡安 #2752|[codepen](https://codepen.io/yi-an-yang/pen/zYLBmvJ?editors=1010)|
|AuroraC#6539|[codepen](https://codepen.io/AuroraC/pen/VwBjEeo?editors=1010)|
|PeihanWang#2530|[codepen](https://codepen.io/PeihanWang/pen/BaPzqKL?editors=1010)|
|Kimi#9564|[CodePen](https://codepen.io/kimihu91/pen/xxJwjGm)|
|KC_8685#9343|[Codepen](https://codepen.io/cathy7411/pen/ExpydKd)|
|大衛#4869|[Codepen](https://codepen.io/exnsrpjc/pen/GRBqYNo)|
|kenki100|[Codepen](https://codepen.io/ken100/pen/wvxWYzg)|
|popeye#5081|[Codepen](https://codepen.io/popeye_ux/pen/wvxWYdJ)|
|JackC#0411|[Codepen](https://codepen.io/key0329/pen/yLqJRXK)|
|心幻羽#0056|[Codepen](https://codepen.io/linglingsyu/pen/gOjMBoL?editors=1010)|
|RainLiao#2616|[Codepen](https://codepen.io/billpop741/pen/XWBKxay)|
|yaru#6308|[CodePen](https://codepen.io/lszaietc/pen/MWBePOX)|
柔柔#1716|[Codepen](https://codepen.io/rouchen/pen/vYaKVjG?editors=1010)
| yuyu#6310        | [CodePen](https://codepen.io/yuyu0905/pen/oNMLayg?editors=1010)              |
| azami#5986       | [Codepen](https://codepen.io/azami/pen/oNMLaqN)                              |
| 圈圈#4060        | [Codepen](https://codepen.io/wjejfczn-the-bold/pen/oNMLaYr)                  |
| Benson#6763      | [Codepen](https://codepen.io/kumashow/pen/XWBKxqO)                           |
| Chi#7605         | [Codepen](https://codepen.io/YoChi84/pen/poZbxOZ)                            |
| Tami#6742        | [Codepen](https://codepen.io/wqsdqbjn-the-vuer/pen/MWBePLz)                  |
| 大頭#8116        | [Codepen](https://codepen.io/d22495521/pen/LYBZgKp?editors=1010)             |
| masterYan#2480   | [Codepen](https://codepen.io/htzwgoqt-the-looper/pen/LYBZgwG?editors=1010)   |
| kuku#3118        | [Codepen](https://codepen.io/mengting-ku/pen/JjBKmgd)                        |
| 威爾#1694        | [CodePen](https://codepen.io/WILL_Wu/pen/XWBKxvL)                            |
| 薯餅#3581        | [CodePen](https://codepen.io/ColdingPoTaTo/pen/QWBEJLB)                      |
| mandylai#4055    | [CodePen](https://codepen.io/mandy-lai-2/pen/rNrLqQR)                        |
| Alex#9978        | [CodePen](https://codepen.io/datsxzqg-the-selector/pen/oNMLQwB?editors=1010) |
| LHchien33#6232   | [CodePen](https://codepen.io/lin_chien/pen/oNMLQMw)                          |
| 阿榮#8277        | [CodePen](https://codepen.io/mogzbvfl-the-reactor/pen/dyjXQgV)               |
| RainJ#3480       | [CodePen](https://codepen.io/RainJCode/pen/wvxWQQR)                          |
| PH#2731          | [CodePen](https://codepen.io/lokf9527/pen/KKBMrrO?editors=1010)              |
| 小木馬#8760      | [CodePen](https://codepen.io/wmmtbcsd/pen/PoBzxVy?editors=1010)              |
| Hironaka#7367    | [CodePen](https://codepen.io/Hironaka0815/pen/xxJOQBq?editors=1010)          |
| Wendy77#8049     | [Codepen](https://codepen.io/Wendy__/pen/ExpyOya)                            |
| LinaChen#1796    | [Codepen](https://codepen.io/LinaChen/pen/xxJOQvr)                           |
| Ruby Chen#7452   | [Codepen](https://codepen.io/ruby92429/pen/eYjzbOz?editors=1010)             |
| ㄚ翔#8126        | [codepen](https://codepen.io/engineerjohnson/pen/vYaKvOa)                    |
| Asher Xu#9297    | [codepen](https://codepen.io/kirakira72/pen/NWBreqQ)                         |
| 黑白兔#0684      | [codepen](https://codepen.io/johnny329/pen/bGjeOpX)                          |
| int#7518         | [Codepen](https://codepen.io/intHuang/pen/mdjEaOa?editors=1010)              |
| Jill Lee#0809    | [Codepen](https://codepen.io/chi-ling-lee/pen/NWBreYG?editors=1010)          |
| ChloeLo#4858     | [Codepen](https://codepen.io/chloelo/pen/poZbqOR)                            |
| k.sin#3115       | [Codepen](https://codepen.io/sin588/pen/bGjeOLd?editors=1010)                |
| Yuna Huang#2692  | [Codepen](https://codepen.io/Yuna1002/pen/jOprXeV?editors=1010)              |
| 法希娜#3206      | [Codepen](https://codepen.io/yiiserpf-the-encoder/pen/jOprXXV?editors=1010)  |
| Potatolee#7749   | [Codepen](https://codepen.io/potatoleee/pen/poZbqQe?editors=1010)            |
| Cheryl#4007      | [Codepen](https://codepen.io/Cheryl-Hsu/pen/jOprXdy?editors=1010)            |
| RJRS#9430        | [CodePen](https://codepen.io/RJRS/pen/mdjEvOe)                               |
| jacky010080#0880 | [CodePen](https://codepen.io/Yen-Jung-Chen/pen/MWBeLGB?editors=1010)         |
| albee#9121       | [Codepen](https://codepen.io/albee-chang/pen/zYLBemX?editors=1010)           |
| SASIMI#5099      | [Codepen](https://codepen.io/sashimi1327/pen/LYBZqqV)                        |
| jimmyFang#9575   | [Codepen](https://codepen.io/pohxiqqo/pen/wvxWNVp)                           |
| 魚子醬#5220      | [CodePen](https://codepen.io/haihsuan/pen/yLqJwVr)                           |
| RyanC#6960       | [CodePen](https://codepen.io/RyanYD/pen/YzjWgxQ?editors=1010)                |
| 阿鑫#4346        | [CodePen](https://codepen.io/Neil1024/pen/LYBZvBJ?editors=1010)              |
| Amberhh#2465     | [codepen](https://codepen.io/Amberhh/pen/MWBePoG)                            |
| hannah#2224      | [codepen](https://codepen.io/hangineer/pen/zYLBQRe?editors=1010)             |
| RayChen#6088     | [codepen](https://codepen.io/raychen1996/pen/abjZrjr)                        |
| 老皮博士#8050    | [codepen](https://codepen.io/li0406/pen/JjBKqxP?editors=1010)                |
| Fang#4680        | [Codepen](https://codepen.io/std95174/pen/PoBzvvj)                           |
| yoyo#1003        | [Codepen](https://codepen.io/pen/GRBqbJE)                                    |
| yoyo123456#0577  | [Codepen](https://codepen.io/hungyoyo/pen/NWBrZEJ)                           |
| DIO大人#4776     | [Codepen](https://codepen.io/oscar-2283/pen/RwBRXPB)                         |
| Mylène#2481      | [CodePen](https://codepen.io/hamajibashi/pen/gOjMevK)                        |
| Rena#6249        | [Codepen](https://codepen.io/aureate0116/pen/gOjMVxy)                        |
| 出事了阿伯#9923  | [Codepen](https://codepen.io/BradpittLai/pen/oNMLKjE?editors=1010)           |
| 阿異#4776        | [Codepen](https://codepen.io/yani21399/pen/BaPLBmp)                           |
| Bella_#1587      | [Codepen](https://codepen.io/Chen-Bella/pen/LYBZwrB)                         |
|Austyn#0949|[Codepen](https://codepen.io/fish90547/pen/OJwRLvW)|
Zack_P#1805|[Codepen](https://codepen.io/tmzazirh-the-animator/pen/dyjpbQo?editors=1010)|
| christina#6185 |[Codepen](https://codepen.io/chrisc0210/pen/oNMzvdN)|
| xin#1214 |[Codepen](https://codepen.io/SiaoYao/pen/XWBjWaJ)|
| 柚子#3958 |[Codepen](https://codepen.io/as6625998/pen/QWBKWBo?editors=1010)|
| 無名#6427 |[Codepen](https://codepen.io/Nomoney/pen/KKBMvMV)|
| enolachen#8031 |[Codepen](https://codepen.io/Chen-Enola/pen/zYLKxRE?editors=1010)|
| 泊岸#3466 |[Codepen](https://codepen.io/qoq77416416/pen/MWBjydP?editors=1010)|
| 冬天#5215 |[Codepen](https://codepen.io/winter_/pen/WNKGxVB)|
| YC#2522 | [CodePen](https://codepen.io/YCLu/pen/XWBjjMM) |
| Hilda#7085 |[Codepen](https://codepen.io/vwquikad-the-vuer/pen/jOpMVgK)|
| 小夜#3809 |[Codepen](https://codepen.io/Naito_K/pen/QWBKdLr?editors=1010)|
| 米米#1824 |[Codepen](https://codepen.io/Jameshsu0407/pen/abjmJLL?editors=1010)|
| FiReBrO#0557 |[Codepen](https://codepen.io/firebro42/pen/dyjpRbG)|
|阿沁#8176|[Codepen](https://codepen.io/a8322342/pen/WNKGXWm?editors=1010)
|hungya#0773|[Codepen](https://codepen.io/hungya777/pen/ExpgRRG?editors=1010)
| ABOOS#6276 |[Codepen](https://codepen.io/guhungyin/pen/JjBRxpx?editors=1010)|
| Bassjim#0118 |[Codepen](https://codepen.io/unrtxbaq/pen/yLqVYQr?editors=1010)|
| Knock59487#9114 |[Codepen](https://codepen.io/Zack88/pen/GRBNmzo)|
| Wei#2330 |[Codepen](https://codepen.io/ixfjxrbo-the-typescripter/pen/BaPQZZw)|
| CatBoxy#4207 |[Codepen](https://codepen.io/nekoboxy/pen/ExpydgO)|
|Winnie#1306|[Codepen](https://codepen.io/WinnieWuWinnie/pen/WNKoXJy?editors=1010)|
|Mia小福#4473|[Codepen](https://codepen.io/a0950271/pen/bGjBjNR?editors=1010)|
|sophiee#7015|[codepen](https://codepen.io/sophiee2727/pen/BaPQqgQ?editors=1010)|
|How#5806|[codepen](https://codepen.io/howtobefine/pen/GRBNwvr)|
|Peng#9811|[codepen](https://codepen.io/peng-027/pen/LYBboYm)|
|ViNci#4273|[codepen](https://codepen.io/ViNciSyo/pen/VwBmObq)|
|shiuan#4721|[codepen](https://codepen.io/prankaChang/pen/wvxgaVo?editors=1010)|
|JY#5712|[Codepen](https://codepen.io/judy_123/pen/MWBJbBv)|
|suihsilan#9485|[Codepen](https://codepen.io/suihsilan/pen/dyjNevv?editors=1010)|
|Hazel.#6020|[CodePen](https://codepen.io/Hazelhsieh/pen/BaPLEwE?editors=1111)|
|竹輪#3335|[CodePen](https://codepen.io/chikuwa0120/pen/qByRQrG)|
|你看我像是會玩嗎#1866|[Codepen](https://codepen.io/hasagg/pen/jOpBNXV)
|艸良#2846|[Codepen](https://codepen.io/momoninainai/pen/VwBpKXW?editors=1010)|
|helena#8461|[Codepen](https://codepen.io/helena27/pen/PoBpbKg?editors=1010)|
popcorn_3q#9893|[Codepen](https://codepen.io/arnyrpqt-the-sasster/pen/ZEjeBjK?editors=1010)|
|MengLin#3001|[Codepen](https://codepen.io/aacj2642/pen/MWBpJMz?editors=1010)|
|Paul#7426|[CodePen](https://codepen.io/paul-1997/pen/dyjvWoJ?editors=1010)|
|YI#0863|[CodePen](https://codepen.io/YI0305/pen/abjJWWy?editors=1010)|
|Cream#3449|[CodePen](https://codepen.io/frxdwbbi-the-sasster/pen/dyjvBow?editors=1010)|
|Shuo#1596|[CodePen](https://codepen.io/chiangchungshuo/pen/ZEjKoQM?editors=1010)|
|Judy Wei#6103|[CodePen](https://codepen.io/Judy0718/pen/XWBRPWy)|
|IreneY#0086|[CodePen](https://codepen.io/HalfPlannedJourney/pen/VwBbGgP?)|
| Jenny真#7532 | [CodePen](https://codepen.io/wei-chen-wu/pen/WNKjqQv?editors=1010) |
| kevin8349#6131 | [CodePen](https://codepen.io/xlqjezvc-the-encoder/pen/VwBWKOm?editors=1010) |
| YU#0618  |  [CodePen](https://codepen.io/yoken_/pen/QWBqEXy)  |
| Cookie SSS#6991  |  [CodePen](https://codepen.io/sqhjikpa-the-selector/pen/OJwxaRo)  |
| GOD_QWERTYUIOPLKJLKLLOINJ_MASTER#4922 |  [CodePen](https://codepen.io/sho666/pen/OJwOLzj)  |
|Yiru#0236|[Codepen](https://codepen.io/yiru94/pen/qBymEqE?editors=1010)|
|阿蘇#8531|[Codepen](https://codepen.io/susu3131/pen/OJwQJWx?editors=1010)|
|Tuhacrt#0008|[codepen](https://codepen.io/Tuhacrt/pen/BaPxqLb)|
|大大#5164|[codepen](https://codepen.io/gzonothk-the-looper/pen/QWBxord?editors=1111)|
|周周#3503|[Codepen](https://codepen.io/jhoujhou-the-decoder/pen/gOjKNmV?editors=1010)|
|Jujubeleven#1036|[Codepen](https://codepen.io/jujubeleven/pen/QWVLpmv?editors=1010)|
|Eason#7884|[Codepen](https://codepen.io/ASLEO/pen/eYPObOP)|
|Eileen#6454|[Codepen](https://codepen.io/Eileen-io/pen/VwEmgyx)|