---
# System prepended metadata

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

---

# 🏅 5/20 (四) 每日任務 Day 19
###### tags: `Vue 直播班 - 2021 夏季班`

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

> 在 input 欄位輸入文字後，點擊「觸發按鈕」可以觸發 callName 函式

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

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

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

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

<!-- 解答
<div id="app">
  <div class="container p-3">
    <div class="d-flex flex-column">
      <label for="name">請輸入姓名</label>
      <input type="text" v-model="name" class="mb-3">
    </div>
    <button type="button" class="btn btn-primary" @click="callName">觸發事件</button>
  </div>
</div>
-->

回報區
---
<!--1:Alpha
codepen:https://codepen.io/alphatero/pen/OJpbqGO
-->

<!--2:Jasmin
codepen:https://codepen.io/thejasmin/pen/jOBVJov
-->

<!--3:Li Shang
codepen:https://codepen.io/li-shang/pen/dyvOrBX
-->

<!--4:Lina Chen
codepen:https://codepen.io/LinaChen/pen/rNyWRbg
-->

<!--5:小魚
codepen:https://codepen.io/jarvis1993/pen/wvJoZaj
-->

<!-- 6:yijun
codepen:https://codepen.io/sandy3068/pen/qBrqwOZ
-->

<!-- 7: Alysa Chan 
codepen: https://codepen.io/alysachan/pen/NWpbmbO?editors=1010
-->

<!-- 8:Vic
codepen: https://codepen.io/hsuan333/pen/WNpoWjL
-->

<!-- 9: Iva Hsu 
codepen: https://codepen.io/Hsu1Fang/pen/eYvBoVN
-->
<!-- 10:陳sam
codepen:https://codepen.io/euldpliv/pen/eYvBojp?editors=1010
-->

<!-- 11: Wendy Li
codepen: https://codepen.io/rockayumitw/pen/dyvOLKV?editors=1010
-->

<!-- 12: Yi Chieh
codePen: https://codepen.io/Yi-Chieh/pen/poeNBZz
-->

<!-- 13: Harold
codepen: https://codepen.io/YuWin0805/pen/abJBxrW
-->

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

<!-- 15:Tori
codepen:https://codepen.io/hayen/pen/BaWNVox?editors=1010
-->

<!-- 16: Yiren
codepen: https://codepen.io/Yiren_Liou/pen/OJpbYoP
-->

<!-- 17: Sec
codepen: https://codepen.io/Sentiments/pen/bGqByQp?editors=1010
-->

<!-- 18: 李重炫
codepen: https://codepen.io/otherway1123/pen/KKWNjOG
-->

<!-- 19: Ethan
codepen: https://codepen.io/blazer030/pen/KKWNOgJ
-->

<!-- 20: peter.chen1024
codepen: https://codepen.io/JIAN-RONG/pen/vYxyoRp?editors=1010
-->

<!-- 21: Joe Kuo
codepen: https://codepen.io/alertislow/pen/LYWbwJL?editors=10100
-->

<!-- 22: Alvin
codepen:https://codepen.io/wave99487chu/pen/xxqgKgp
-->

<!-- 26: Dah
codepen:https://codepen.io/hua0124/pen/mdWRbzN?editors=1011
-->

<!-- 27: 圈圈
codepen:https://codepen.io/wei-the-lessful/pen/ExWZxgO
-->

<!-- 28: Jay
codepen: https://codepen.io/jayredk/pen/GRWrRzW?editors=1010
 -->
 
<!-- 29: Izumi 泉
codepen: https://codepen.io/izumi-dev/pen/GRWqLxe
-->
 
 <!-- 30: Jordan Tseng
codepen:  https://codepen.io/jordan-ttc-design/pen/VwpPYxM?editors=1010
-->

 <!-- 31: Echo
codepen:  https://codepen.io/eni13718/pen/QWpdwRe
-->

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

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

<!-- 34: Larry
codepen: https://codepen.io/manpower0708/pen/PopWZaB
-->

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


<!--報數 36： RitaHuang
CodePen：
https://codepen.io/Rita-Rossweisse/pen/qBrRaXa?editors=1010
-->

<!--報數 37: YOYO
CodePen：
https://codepen.io/lumedkle/pen/jOByyaY?editors=1010
-->

<!-- 報數 38: Echo Hui
CodePen： https://codepen.io/echohuiecho/pen/mdWRmVz -->

<!-- 報數 39: Alicia Lo
CodePen
https://codepen.io/dkcyhyre/pen/abJppZQ
-->

<!-- 報數 40: WuJungHan
https://codepen.io/JungHanWu/pen/oNZBdQw?editors=1010
-->


<!-- 41: Erica
https://codepen.io/ericadu/pen/MWpJGRY
-->

<!-- 42: 阿倫
https://codepen.io/jason5125122/pen/xxqgjJE
-->

<!-- 43: jimmyFang
https://codepen.io/pohxiqqo/pen/rNyjqOL?editors=1010
-->

<!-- 44: Ted Kuo
https://codepen.io/TedKuo/pen/qBrRQmv
-->

<!-- 45: Tofu Tseng
https://codepen.io/Tofutseng/pen/abJpXQq
-->

<!-- 46: Valerie
CodePen: https://codepen.io/vicky-chang/pen/ExWZMzz?editors=1010
-->

<!-- 47: Jack
https://codepen.io/yxzzktmb/pen/xxqgezV?editors=1010
-->

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

<!-- 49: Jessie Cheng
https://codepen.io/JessieMosbi/pen/MWppEry
-->

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

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

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

<!-- 53: Fred Chang
https://codepen.io/fred8196/pen/XWMMOqp?editors=1010
-->

<!-- 53: Amanda Chiang
https://codepen.io/cym199922/pen/BaWRKzO
-->

<!-- 54: MM
https://codepen.io/MINN3/pen/WNpjoBN
-->

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