---
# System prepended metadata

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

---

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

請閱讀完 [課前預習](https://hackmd.io/@hexschool/S1DJeKTdL/%2FRhud3_1PR9qv1RJyMfwUmA) 後再作答

題目 (請將答案貼上 CodePen 回報)
---
操作 [這個模板](https://codepen.io/hexschool/pen/mdWVPXM)，執行以下要求 (只能修改 HTML 的部分):

> 1.操作 class 為 Q1 的 div 標籤，將 HTML 畫面渲染如下(需要使用 {{}} 帶入 data 中的 money, debt):

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

> 2.操作 class 為 Q2 的 div 標籤，使用 v-text 代入 data 的 rawHTML。
> 3.操作 class 為 Q3 的 div 標籤，使用 v-html 代入 data 的 rawHTML。

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

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

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

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

<!-- 解答
<div id="app">
   <div class="Q1">
     小明有 {{ money }} 元，扣掉負債 {{ debt }} 元，剩下 {{ money - debt }} 元
   </div>
   <div class="Q2" v-text="rawHTML">
   </div>
  <div class="Q3" v-html="rawHTML">
   </div>
</div>
-->

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

<!--2:Lina Chen
codepen:https://codepen.io/LinaChen/pen/mdWEawQ
-->

<!-- 3: Alysa Chan 
codepen: https://codepen.io/alysachan/pen/BaWzvZe
-->

<!-- 4: harold
codepen: https://codepen.io/YuWin0805/pen/wvJWRqL
-->

<!-- 5: 圈圈
codepen: https://codepen.io/wei-the-lessful/pen/dyvXwze
-->

<!-- 6: 小魚
codepen: https://codepen.io/jarvis1993/pen/vYxKveV
-->

<!-- 7: Joe Kuo
codepen: https://codepen.io/alertislow/pen/qBrNLpx
-->

<!-- 8: yijun
codepen:
https://codepen.io/sandy3068/pen/oNZLJyM
-->
<!-- 9: LiShang
codepen:
https://codepen.io/li-shang/pen/abJZPGV
-->

<!-- 10:Allen Chou
codepen:
https://codepen.io/eepson123tw/pen/KKWMbxM
-->

<!-- 10:Yu Sung
codepen:
https://codepen.io/kevin-hsu-the-encoder/pen/ExWyGGo?editors=1010
-->
<!--11:陳sam
codepen:
https://codepen.io/euldpliv/pen/LYWZMvJ
-->

<!-- 13:Ethan
codepen: https://codepen.io/blazer030/pen/LYWZqYX
-->

<!-- 14:youting 
codepen: https://codepen.io/youtingluo/pen/mdWEvEd?editors=1010
-->

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

<!-- 16: Vic
codepen: https://codepen.io/hsuan333/pen/JjWKxRe
-->

<!-- 17: Jay
codepen: https://codepen.io/jayredk/pen/wvJWNyg
 -->
 
<!-- 18: tim Chou
codepen: https://codepen.io/tim-chou/pen/rNyLPQQ?editors=1010
 -->
 
<!-- 19: Sec
codepen: https://codepen.io/Sentiments/pen/NWprJGY?editors=1111
-->


<!-- 報數20： RitaHuang
Codepen：
https://codepen.io/Rita-Rossweisse/pen/YzZWgPW?editors=1010
-->

<!-- 報數21： Carol
Codepen：
https://codepen.io/taonong/pen/eYvzXLY
-->

<!-- 報數22： Larry
Codepen：
https://codepen.io/manpower0708/pen/vYxKPze?editors=1010
-->

<!--23: Yi Chieh
codePen: https://codepen.io/Yi-Chieh/pen/mdWEoGp
-->

<!-- 24: peter.chen1024 
codepen:
https://codepen.io/JIAN-RONG/pen/NWprJwL
-->

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

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

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

<!-- 28: 林晉
codepen: https://codepen.io/linchinhsuan/pen/MWpeMaZ
-->

<!--29: 阿倫
codepen:https://codepen.io/jason5125122/pen/JjWKQMX
-->

<!--30: YOYO
codepen: https://codepen.io/lumedkle/pen/jOBrjaQ?editors=0001
-->

<!--31: Ming Jo
codepen: https://codepen.io/BigMine/pen/vYxKqMp?editors=1010
-->

<!-- 32: Dah
codepen: https://codepen.io/hua0124/pen/vYxKoYd
-->

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

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

<!--35: Ted Kuo
https://codepen.io/TedKuo/pen/vYxXLOd
-->

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

<!--37: Echo
https://codepen.io/eni13718/pen/NWpRNGN
-->

<!--38: Ed Huang
https://codepen.io/yide1986/pen/vYxXKNK?editors=1010
-->

<!-- 39: Echo Hui
CodePen: https://codepen.io/echohuiecho/pen/BaWLmKd -->

<!-- 40: Jordan Tseng
CodePen: https://codepen.io/jordan-ttc-design/pen/WNpGXZy -->

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

<!-- 42: Oober 
https://codepen.io/xtsjrjdv/pen/VwpKdGo
-->

<!-- 43: WuJungHan
https://codepen.io/JungHanWu/pen/rNyMprj?editors=1010
-->

<!-- 44: Tofu Tseng
https://codepen.io/Tofutseng/pen/OJpRjYK
-->

<!-- 45: Erica
https://codepen.io/ericadu/pen/gOmwZLj
-->

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

<!-- 47:carrie
https://codepen.io/echocarriet/pen/RwpoGVQ
-->

<!-- 48:Alvin chu
https://codepen.io/wave99487chu/pen/OJpbRvr
-->

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

<!--  50: jimmyFang

https://codepen.io/pohxiqqo/pen/YzZpaZy?editors=1010
-->

<!--  51: Emily Hsi
https://codepen.io/EmilyHsi/pen/yLMVmar
-->

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

<!-- 53: Wei 
https://codepen.io/uwhhiaxx/pen/VwpPPEv?editors=1010
-->

<!-- 54: leolee 
https://codepen.io/nekorice/pen/JjWELgj
-->

<!--55: Eva lin
https://codepen.io/evalin0316/pen/dyvNaNm
-->

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

<!-- 57: Stacey Huang
https://codepen.io/staceyhuang/pen/oNZZpyz
-->

<!-- 58: Amber
https://codepen.io/amberTing/pen/BaWWOXP
-->

<!-- 59: Fred Chang
https://codepen.io/fred8196/pen/rNyyPMx
-->

<!-- 60: Amanda Chiang
https://codepen.io/cym199922/pen/oNZWbQL
-->

<!-- 61: MM
https://codepen.io/MINN3/pen/XWMRNgd
-->

<!-- 62: 涂阿銘
https://codepen.io/asd40441/pen/VwpWKXL
-->

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

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