---
# System prepended metadata

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

---

# 🏅 5/26 (三) 每日任務 Day 23
###### tags: `Vue 直播班 - 2021 夏季班`

題目 (請將答案貼上 CodePen)
---
操作 [這個模板](https://codepen.io/znlcgmgk/pen/KKabvaB?editors=1011) (只能操作 HTML 的部分)，並依照註解的要求撰寫程式碼。

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

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

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

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

<!-- 解答
<div id="app">
  <div class="container mt-3">
    <h3>Q1</h3>
    <form @submit.prevent="onSubmit" class="mb-3">
      <button>送出表單</button>
    </form>
    <h3>Q2</h3>
    <button @click.once="executeOnce" class="mb-3">點擊按鈕</button>
    <h3>Q3</h3>
    <input type="text" v-model="text" @keyup.enter="onEnter">
  </div>
</div>
-->

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

<!-- 2:Vic
Codepen:https://codepen.io/hsuan333/pen/XWMgqXq
-->

<!-- 3:Lina Chen
Codepen:https://codepen.io/LinaChen/pen/rNywvLv
-->
<!-- 4:LiShang
Codepen:https://codepen.io/li-shang/pen/bGqRMgg
-->

<!-- 5: harold
codepen:https://codepen.io/YuWin0805/pen/poewVrp
-->

<!-- 6: Iva / Ifang  
codepen: https://codepen.io/Hsu1Fang/pen/LYWLmjo
-->

<!-- 7: 4組/Jasmin
Codepen:https://codepen.io/thejasmin/pen/abJwGqM?editors=1011
-->

<!-- 8: Jessie Cheng
Codepen: https://codepen.io/JessieMosbi/pen/LYWLmmw
-->

<!-- 9: Izumi 泉
CodePen: https://codepen.io/izumi-dev/pen/JjWJvLq
-->

<!--10.allen chou 
codepen: https://codepen.io/eepson123tw/pen/abJwGax?editors=1011
-->

<!-- 11. Alysa Chan
codepen: https://codepen.io/alysachan/pen/XWMgqOG?editors=1011
-->

<!-- 12. Jordan Tseng
codepen: https://codepen.io/jordan-ttc-design/pen/MWpoGdP?editors=1011
-->

<!-- 13.Tofu Tseng
codepen: https://codepen.io/Tofutseng/pen/VwpWdYj
-->

<!-- 14: Wendy Li
codepen: https://codepen.io/rockayumitw/pen/ExWXRVY?editors=1011
-->

<!-- 15: Jack
https://codepen.io/yxzzktmb/pen/QWpgxyB?editors=1011
-->

<!-- 16: Tori
https://codepen.io/hayen/pen/dyvWMbv?editors=1010
-->
<!-- 17:陳sam
https://codepen.io/euldpliv/pen/zYZzaoO?editors=1011
-->

<!-- 18: Fred Chang
https://codepen.io/fred8196/pen/jOBwKYd
-->

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

<!-- 20: Joe Kuo
https://codepen.io/alertislow/pen/bGqRKMm?editors=1001
-->

<!-- 21: Yiren
codepen: https://codepen.io/Yiren_Liou/pen/oNZwypB
-->

<!-- 22: Yi Chieh
codepen: https://codepen.io/Yi-Chieh/pen/rNywKRx
-->

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

<!-- 24: Larry
codepen: https://codepen.io/manpower0708/pen/qBrjyaV?editors=1011
-->

<!-- 25: Sec
codepen: https://codepen.io/Sentiments/pen/LYWLBrr?editors=1011
-->

<!-- 26: 小魚
codepen: https://codepen.io/jarvis1993/pen/zYZzLQR
-->

<!-- 27： RitaHuang
https://hackmd.io/NvSs5XtfQrK6QLLiSEulbg
-->

<!-- 28: 阿倫
codepen:https://codepen.io/jason5125122/pen/QWpgrXr
-->

<!-- 29: Erica
https://codepen.io/ericadu/pen/ExWXege
-->

<!-- 30: peter.chen1024
https://codepen.io/JIAN-RONG/pen/YzZQOjX?editors=1011
-->
<!-- 31: YuSung
https://codepen.io/kevin-hsu-the-encoder/pen/rNywZdq?editors=1011
-->

<!-- 32: Eason
https://codepen.io/alanwu0828/pen/JjWJaeg?editors=1111
-->

<!-- 33: Iven
https://codepen.io/rtorihnk/pen/RwpgejZ?editors=1011
-->

<!-- 34: Jay
codepen: https://codepen.io/jayredk/pen/PopjxJg?editors=1011
 -->
 
 <!-- 35: Amber
codepen: https://codepen.io/amberTing/pen/WNpOYPw?editors=1011
-->

<!-- 36: Alicia Lo
codepen:https://codepen.io/dkcyhyre/pen/KKWqbMq
-->

<!-- 37: tim Chou
codepen: https://codepen.io/tim-chou/pen/gOmRJBe?editors=1011
-->

<!--38: YOYO
codepen: https://codepen.io/lumedkle/pen/eYvRqgM
-->

<!-- 39: Ted Kuo
codepen: https://codepen.io/TedKuo/pen/zYZzgRm
-->

<!-- 40: Ed Huang
codepen: https://codepen.io/yide1986/pen/QWpMWXE?editors=1011
-->

<!-- 41: yijun
codepen: https://codepen.io/sandy3068/pen/RwpZwev?editors=1011
-->

<!-- 42: Echo Hui
codepen: https://codepen.io/echohuiecho/pen/oNZebbJ -->

<!-- 43: WuJungHan
codepen: https://codepen.io/JungHanWu/pen/bGqroJm -->

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

<!-- 45: oober
codepen: https://codepen.io/xtsjrjdv/pen/XWMeNdo 
-->

<!--46: jimmyFang
https://codepen.io/pohxiqqo/pen/ZEeXLoQ
-->

<!-- 47: Valerie
codepen: https://codepen.io/vicky-chang/pen/wvJreME?editors=1011
-->

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

<!-- 49: AlvinChu
codepen: https://codepen.io/wave99487chu/pen/LYWOPzP
-->

<!-- 50: 圈圈
codepen: https://codepen.io/wei-the-lessful/pen/bGqYqJp
-->

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

<!-- 52: twoz
codepen: https://codepen.io/twoz/pen/KKWQzaN?editors=1011
-->

<!-- 53: moitw
https://codepen.io/tsuifei/pen/LYWKJyo?editors=1011
-->