---
# System prepended metadata

title: "\U0001F3C5 5/18 (二) 每日任務 Day 17"
tags: [Vue 直播班 - 2021 夏季班]

---

# 🏅 5/18 (二) 每日任務 Day 17
###### tags: `Vue 直播班 - 2021 夏季班`

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

題目 (請將答案貼上 CodePen)
---
請操作 [這個模板](https://codepen.io/znlcgmgk/pen/abpRNvV?editors=1010)，執行以下要求 (只能操作 HTML 的部分):

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


回報流程
---
請同學依照下圖教學觀看解答、回報答案:

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

回報格式如下圖，請在「回報區」使用註解回報答案 (為了統計人數，請同學依序加上「報數」)

![](https://i.imgur.com/L7kyew8.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>
-->

回報區
---
<!-- 1: Sec
codepen: https://codepen.io/Sentiments/pen/gOmwGmb?editors=1010
-->

<!-- 2:Alpha
codepen:https://codepen.io/alphatero/pen/jOBMGwB
-->


<!-- 3:Jasmin
codepen:https://codepen.io/thejasmin/pen/rNWbZOa
-->

<!-- 4:小魚
codepen:https://codepen.io/jarvis1993/pen/MWpjErr
-->
<!-- 5:LiShang
codepen:https://codepen.io/li-shang/pen/jOBMGam
-->

<!-- 6:Lina Chen
codepen:https://codepen.io/LinaChen/pen/ZEepXKa
-->

<!-- 7:Vic 
codepen:https://codepen.io/hsuan333/pen/WNpGZJj
-->

<!--8: Yi Chieh
codePen: https://codepen.io/Yi-Chieh/pen/XWMjeYB
-->

<!-- 9: Harold
codepen: https://codepen.io/YuWin0805/pen/dyvpVEy
-->

<!--10:allen Chou
codepen:https://codepen.io/eepson123tw/pen/RwpGjGo?editors=1010
-->

<!-- 報數：11 RitaHuang
Codepen：
https://codepen.io/Rita-Rossweisse/pen/NWpRwKa?editors=1010
-->
<!-- 報數：12 Tori
Codepen：
https://codepen.io/hayen/pen/BaWNVox?editors=0100
-->

<!-- 報數:13 youting
codepen: https://codepen.io/youtingluo/pen/wvJzPqy?editors=1010
-->

<!-- 報數:14 Echo Hui
CodePen: https://codepen.io/echohuiecho/pen/JjWRONo?editors=1010 -->


<!-- 報數15: Alysa Chan 
Codepen: https://codepen.io/alysachan/pen/OJpROQz?editors=1010
-->

<!-- 報數16:Jordan Tseng 
Codepen:https://codepen.io/jordan-ttc-design/pen/mdWrqKM?editors=1010
-->

<!-- 報數17:Ethan
codepen: https://codepen.io/blazer030/pen/LYWROJR
-->
<!-- 18: Jack
https://codepen.io/yxzzktmb/pen/qBrapvo
-->
<!-- 19:陳sam
codepen:https://codepen.io/euldpliv/pen/xxqEpeY?editors=1010
-->

<!-- 20:peter.chen1024
codepen:https://codepen.io/JIAN-RONG/pen/rNyMJjp
-->

<!-- 報數21:Iven
Codepen:https://codepen.io/rtorihnk/pen/poeEarw?editors=1010
-->

<!-- 22: Joe Kuo
codepen: https://codepen.io/alertislow/pen/YzZGaww
-->

<!-- 23:Dah
codepen:https://codepen.io/hua0124/pen/MWpjVdN
-->


<!-- 24: Oober 
codepen:https://codepen.io/xtsjrjdv/pen/jOBMKdG?editors=1010
-->

<!-- 25: Larry 
https://codepen.io/manpower0708/pen/WNpGKJK?editors=1010
-->

<!-- 26: Alicia Lo
https://codepen.io/dkcyhyre/pen/qBraJwG
-->

<!-- 27: tim Chou
https://codepen.io/tim-chou/pen/VwpKVyK?editors=1010
-->

<!-- 28: Jay
codepen: https://codepen.io/jayredk/pen/RwpGEgy?editors=1010
 -->

<!-- 29: Wendy Li
codePen: https://codepen.io/rockayumitw/pen/jOBMXXP?editors=1111
-->

<!-- 30: Erica
https://codepen.io/ericadu/pen/bGqwOQX
-->

<!--31: YOYO
codenpen: https://codepen.io/lumedkle/pen/MWpjxGx?editors=1010
-->

<!--32: yijun
codepen: https://codepen.io/sandy3068/pen/wvJzOEm?editors=1010
-->

<!--33: Ted Kuo
codenpen: https://codepen.io/TedKuo/pen/eYvdbxg
-->

<!--34: Ed Huang
codenpen: https://codepen.io/yide1986/pen/WNpGBJR?editors=1111
-->

<!--35: Echo
codenpen: https://codepen.io/eni13718/pen/YzZGbdK
-->

<!--36: WuJungHan
codenpen: https://codepen.io/JungHanWu/pen/zYZKLbG
-->

<!--37: Izumi 泉
codepen: https://codepen.io/izumi-dev/pen/GRWqLxe
-->

<!--38: 阿倫
codepen: https://codepen.io/jason5125122/pen/qBrqOzN
-->

<!--39: 林晉
codepen: https://codepen.io/linchinhsuan/pen/JjWbRwr?editors=1010
-->

<!-- 40: Alvin Chu
codepen:https://codepen.io/wave99487chu/pen/RwpoGqY
-->

<!-- 41: Carrie
codepen: https://codepen.io/echocarriet/pen/ZEeBpyG
-->

<!-- 42: Yiren
codepen: https://codepen.io/Yiren_Liou/pen/poeNNNN?editors=1010
-->

<!-- 43: Jessie Cheng
codepen: https://codepen.io/JessieMosbi/pen/LYWbbXa
-->

<!-- 44: jimmyFang
codepen: https://codepen.io/pohxiqqo/pen/yLMVjqy
-->

<!-- 45: Eyan   
codepen: https://codepen.io/somebody1997/pen/xxqRobm?editors=1010
-->

<!-- 46: 李重炫   
codepen: https://codepen.io/otherway1123/pen/bGqgbWG?editors=1010
-->

<!-- 47: 圈圈
codepen: https://codepen.io/wei-the-lessful/pen/RwpKbOX
-->

<!-- 48: leolee
codepen: https://codepen.io/nekorice/pen/eYvgrZa
-->

<!-- 49: Tofu Tseng
codepen: https://codepen.io/Tofutseng/pen/oNZBmwq
-->

<!-- 50: Valerie
codepen: https://codepen.io/vicky-chang/pen/QWpdovv?editors=1010
-->

<!-- 51: twoz
codepen: https://codepen.io/twoz/pen/NWpppyB?editors=1010
-->

<!-- 52:Wel
https://codepen.io/uwhhiaxx/pen/VwpprrJ?editors=1010
-->

<!-- 53: Stacey Huang
https://codepen.io/staceyhuang/pen/zYZZpJx?editors=1010
-->

<!-- 54: Amber
https://codepen.io/amberTing/pen/JjWWmPR?editors=1010
-->

<!-- 55: Fred chang
https://codepen.io/fred8196/pen/dyvvaNV?editors=1010
-->

<!-- 56: Amanda Chiang
https://codepen.io/cym199922/pen/eYvWZOO?editors=0010
-->

<!-- 57: MM
https://codepen.io/MINN3/pen/ZEeKBrb
-->

<!-- 58: 涂阿銘
https://codepen.io/asd40441/pen/mdWwOym
-->

<!-- 59: Chiang
https://codepen.io/ChiangJ/pen/mdWMxjQ?editors=1010
-->

<!-- 60: Pon Peng
https://codepen.io/pengpon77/pen/YzZLyOP?editors=1010
-->