---
tags: Vue 直播班 - 2022 春季班
---

# 🏅 Day 16
###### tags: `Vue 直播班 - 2022 春季班`

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

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

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


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

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


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


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

回報區
---
| 報數 |組別/名字 | codepen / 其他回饋 |
|:--------:| -------- | -------- |
|1|Aaron Tu|https://codepen.io/aarontu/pen/NWaJbWv|
|2|CloThEs | https://codepen.io/bogwdnxx-the-sans/pen/ExwMgrO|
|3|Sheep| https://codepen.io/SheepNDW/pen/rNGRWVQ |
|4|Wenfish|https://codepen.io/wenfisht/pen/wvrOoKe|
|5| 肉鬆 | https://codepen.io/klrkicog/pen/PoJLbNp |
|6| Fleur | https://codepen.io/swwlee/pen/QWqoGEQ |
|7| Sihle Huang | https://codepen.io/bugbug777/pen/KKXENMR |
|8| kevin嘉軒 | https://codepen.io/kevin-chang-the-sasster/pen/VwMRmPe |
|9| POPEYE | https://codepen.io/popeye_ux/pen/BawbQWw |
|10| Iris Huang | https://codepen.io/ythuang/pen/poWYNrx |
|11| kevinhes| https://codepen.io/kevinhes/pen/LYzabQG|
|12|Yof| https://codepen.io/yangyof/pen/Yzrgpep |
|13| Jhen | https://codepen.io/cheng-jhen/pen/dyVrOZM |
|14| Dobe |https://codepen.io/lisebee/pen/018d21cf2e97b49ccfdc606f256e4a99|
|15| 黑川 |https://codepen.io/kurokawa/pen/GRMeNPO|
|16| Yunei | https://codepen.io/Yunei/pen/zYEbobx |
|17|Howard|https://codepen.io/yawdnhbm/pen/gOGELEo|
|18|Laura|https://codepen.io/minminn/pen/gOGELNv?editors=1010|
|19|威爾|https://codepen.io/WILL_Wu/pen/KKXENOY|
|20|有廖先生|https://codepen.io/billpop741/pen/mdBoOYq|
|21|Pei Ying|https://codepen.io/Pei-Ying/pen/jOGJyro|
|22|Henry Wu|https://codepen.io/dkcmlaww-the-flexboxer/pen/eYGXgRJ |
|23|我是泇吟|https://codepen.io/kljuqbxs/pen/OJxqWjr|
|24|Gill|https://codepen.io/Gill-Chin/pen/qBPvRPX?editors=1010
|25|Arista|https://codepen.io/arista-hsieh/pen/PoJLWQX|
|26|Liu| https://codepen.io/feng-chi-liu/pen/ZEXPLpG |
|27|Jason Chen| https://codepen.io/jason60810/pen/PoJLWrv |
|28| Kelvin Hsu | https://codepen.io/kelvin001/pen/xxXBgop |
|29|andersonshen| https://codepen.io/luxyenni-the-bold/pen/yLzwMaM |
|30|Empty Wu|https://codepen.io/emptywu/pen/ZEXPevv |
|31| Larry | https://codepen.io/larrylinr5/pen/XWeGMZq?editors=1010 |
|32|YC|https://codepen.io/YCLu/pen/wvrOJmW |
|33|Tim Lin|https://codepen.io/TimmyLin/pen/XWeGMxB|
|34| 黃士桓 |https://codepen.io/shr-huan-huang/pen/OJxqpaX?editors=1010 |
|35| AllenW |https://codepen.io/AllenW/pen/jOGJBQL |
|36| 陳暐中 |https://codepen.io/wei-z/pen/NWaJjNw|
|37| Pei Chi | https://codepen.io/pei-chi-tsai/pen/ZEXPKJw|
|38| Charlotte Lee | https://codepen.io/charlotte-lee/pen/zYEbwpg?editors=1010|
|39|Scottie|https://codepen.io/wow767t/pen/poWYwJX|
|40|yu|https://codepen.io/yuu9916/pen/mdBomvB?editors=1010|
|41|Calon|https://codepen.io/Calon0118/pen/XWeGgaK|
|42|Wilson|https://codepen.io/ittaxcjv-the-reactor/pen/KKXEvpM?editors=1010
|43|Benson|https://codepen.io/soul81624/pen/ZEXPaGz |
|44|Rick Tzeng|https://codepen.io/rick917jp6/pen/MWExQEz
|45|shio|https://codepen.io/shioyen/pen/zYEbRyY
|46|Gui|https://codepen.io/guitimliu/pen/bGoZLJj
|47|小K|https://codepen.io/kelen1995/pen/WNZmzPN
|48|Jasper|https://codepen.io/li-jasper/pen/ExwMEJv |
|49|咖咖|https://codepen.io/gon790219/pen/wvrOjQz |
|50|Jean Chiang|https://codepen.io/jeanchiang1221/pen/LYzarqZ|
|51|柴貓|https://codepen.io/shibacat/pen/zYEbJrE|
|52|nora-end|https://codepen.io/nora-shu/pen/zYEbJZp|
|53|mei|https://codepen.io/Shila-Chen/pen/rNGRqWo|
|54|Bonnie|https://codepen.io/bonnieli1414/pen/dyVrapP?editors=1111 |
|55|Evan Chiang|https://codepen.io/piskesocute/pen/poWYGBG|
|56|tingyu|https://codepen.io/dgltu/pen/ExwMBNK |
|57|John|https://codepen.io/jiangshuuu/pen/NWaXXWb?editors=1011 |
|58|Leo Song|https://codepen.io/sunnylaba/pen/KKXYdOp?editors=1010 |
|59|DDDDK|https://codepen.io/dkklee/pen/rNGbLYO |
|60|Himi|https://codepen.io/Himi/pen/vYeMXGQ|
|61|Henry|https://codepen.io/kaohenry9287/pen/vYeMRGm|
|62|Judy☻|https://codepen.io/hsiaohan/pen/gOGyLBW|
|63|Zhang|https://codepen.io/Zhangbun/pen/GRMLewG|
|64|AKI|https://codepen.io/akichen27/pen/WNZBKQz |
|65|Steven Chan|https://codepen.io/Steven1220/pen/qBPGJyG?editors=1010 |
|66|Yummyniya|https://codepen.io/yummyniya/pen/NWaVZBL|
|67|Anna|https://codepen.io/kycrleao/pen/GRMabLQ|
|68|dOvOb|https://codepen.io/gezzgrwj-the-styleful/pen/VwMJwRb
|69|kk|https://codepen.io/potatokaka/pen/RwLzZMB?editors=1010|
|70| Meng | https://codepen.io/MGHN/pen/NWaZMvm |
|71| 肉桂卷 |https://codepen.io/ginnlee/pen/LYzKwOL?editors=1011|
|72| 紙飛機 |https://codepen.io/paperplanea/pen/Yzrmydp |
|73| Otis | https://codepen.io/humming74/pen/MWENLob?editors=1010 |
|74| Will | https://codepen.io/ncrdpepc-the-lessful/pen/yLPBBae |
|75|Terry21|https://codepen.io/feng0409/pen/ZEazBJB?editors=1010 |
|76|Yuan|https://codepen.io/yuanluo13542/pen/JjOPKdm |
|77|Vicky|https://codepen.io/hyxfish27/pen/yLPBoyR |
|78|阿武|https://codepen.io/samwnkyat/pen/oNovmGE |
|79|Jerry|https://codepen.io/rteyfwwd-the-scripter/pen/yLPBWQa|
|80|Hedy|https://codepen.io/hhhsuan41/pen/MWExELd |
|81|Bruno Yu|https://codepen.io/bruno-yu/pen/oNoNgqL |
|82|阿劍| https://codepen.io/seonkuraito/pen/RwLvamM |
|83|ShaoYu| https://codepen.io/shaoyukao/pen/bGYdLgv |
|84|FuChang|https://codepen.io/fuchang830714/pen/KKXYyQj|
|85|JD孟璁|https://codepen.io/oikdkmxq-the-looper/pen/oNojVPp |
|86|hua|https://codepen.io/hexschool/pen/mdWVPXM |
|87|Jianhao|https://codepen.io/jianhao215/pen/oNoZWRE |
|88|ZY Hsu|https://codepen.io/zihyin/pen/NWwpgLr?editors=1010 |
|89|Hedy|https://codepen.io/hhhsuan41/pen/VwrbdzP |
|90|andyii|https://codepen.io/gultrotpybyvue/pen/RwjjGNQ |
|91| Mylène | https://codepen.io/hamajibashi/pen/eYebzeb |
|92|大衛| https://codepen.io/exnsrpjc/pen/ExoyMqw?editors=1010 |
|93|Carol Li|https://codepen.io/carolli834/pen/XWExywN?editors=1010|