---
# System prepended metadata

title: "\U0001F3C5 Day 16 - Vue 指令練習 1"
tags: [Vue 直播班 - 2023 冬季班]

---

---
tags: Vue 直播班 - 2023 冬季班
---
# 🏅 Day 16 - Vue 指令練習 1


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

題目
---
操作 [這個模板](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。


#### 額外挑戰
完成上述題目後，嘗試將 JS 區塊改為使用 Composition API 撰寫

## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔! 
解答位置請參考下圖（需打開程式碼的部分觀看）

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


挑戰：
https://codepen.io/Bingbingboom/pen/WNLXaWv
-->




回報區
---


|     Discord      |                           CodePen / 答案                            |
|:----------------:|:-------------------------------------------------------------------:|
| Yijing | [CodePen](https://codepen.io/Yi-Jing-71080635/pen/ZEPWqvE) |
| bf_tsai | [CodePen](https://codepen.io/BF-Tsai/pen/poYyxVM) |
| Tippy | [CodePen](https://codepen.io/Ektodor-Wang/pen/MWxyPBW) |
| 銀光菇 | [CodePen](https://codepen.io/genesynthesis/pen/poYyxZM) |
| Emily | [CodePen](https://codepen.io/Emily2089/pen/XWGdxwj) |
| Peng | [CodePen](https://codepen.io/H-Peng/pen/zYbqMrw?editors=1010) |
| py | [CodePen](https://codepen.io/Wpypy/pen/gOErBNB?editors=1010) |
| Ann Chou | [CodePen](https://codepen.io/genesynthesis/pen/poYyxZM) |
| XinYu | [CodePen](https://codepen.io/HsuXinYu/pen/zYbqyyQ) |
| Celine 510 | [CodePen](https://codepen.io/Celine-510/pen/MWxyzmb) |
| Ryann | [CodePen](https://codepen.io/csw8524/pen/wvOGQdw) |
| 精靈 | [CodePen](https://codepen.io/justafairy/pen/XWGdyqz) |
| hedy | [CodePen](https://codepen.io/Hedy_H/pen/qBvZQeL?editors=1010) |
| stone4584 | [CodePen](https://codepen.io/Royen0506/pen/JjzXwdw) |
|Moreene|[CodePen](https://codepen.io/Moreene/pen/NWJNeya)|
| cest_jessie | [CodePen](https://codepen.io/itsjessiechen/pen/NWJNEmr) |
| Uli | [CodePen](https://codepen.io/uli1313/pen/NWJNeOX?editors=1010) |
|Wei_Rio|[CodePen](https://codepen.io/wei_wu/pen/bGZpOJa?editors=1010)|
|保羅|[CodePen](https://codepen.io/paul-1997/pen/mdoPaoR?editors=1011)|
| Ataraxia | [CodePen](https://codepen.io/ataraxia8888/pen/MWxyLgL) |
| jia yu | [CodePen](https://codepen.io/fjqxaznl-the-reactor/pen/BabKMoY?editors=1010) |
| KUN. | [CodePen](https://codepen.io/barry91205/pen/ExMKrPx) |
| Eazy | [CodePen](https://codepen.io/Eazychen/pen/XWGdORJ) |
| PoRay | [CodePen](https://codepen.io/raycheng/pen/ZEPWwXz?editors=1011) |
| JING | [CodePen](https://codepen.io/HSUANIN0327/pen/wvOGNqx) |
| skypassion5000 | [CodePen](https://codepen.io/skypassion5000/pen/poYyGKM?editors=1001) |
| Chia Pin | [CodePen](https://codepen.io/joker-cat/pen/OJqNdda) |
| WEI | [CodePen](https://codepen.io/wei-z/pen/WNmwmbV) |
| Fabio20 | [CodePen](https://codepen.io/fabio7621/pen/XWGdGJN) |
| Ting | [CodePen](https://codepen.io/liara/pen/VwRaggy)|
| kuanju27 | [CodePen](https://codepen.io/Eero-Chiao/pen/VwRaRmB)|
| Winnie | [CodePen](https://codepen.io/codepen-io-winnie/pen/JjzXxZE?editors=1010)|
| ⭐️小正 | [CodePen](https://codepen.io/colorgolden/pen/dyrMrww)|
| kawa | [CodePen](https://codepen.io/z83xji6/pen/KKEMqZV) |
| Yang | [CodePen](https://codepen.io/Yang-J/pen/WNmwWgd) |
| Leo | [CodePen](https://codepen.io/Aruminiya/pen/JjzXVgo) |
| Nelly | [CodePen](https://codepen.io/Nelly-Guo/pen/wvOGLmv) |
| Antonio | [CodePen](https://codepen.io/gwhvusel-the-builder/pen/yLwOdwb) |
| MDFK | [CodePen](https://codepen.io/maywang/pen/rNReKQe?editors=1011) |
| Iris | [CodePen](https://codepen.io/iris831206/pen/PoLNMOG) |
| SHUO | [CodePen](https://codepen.io/xrzarxkl-the-reactor/pen/XWGdLZa) |
|smalljie|[CodePen](https://codepen.io/smalljie/pen/XWGdvYo)|
| sponge | [CodePen](https://codepen.io/biunpujm-the-flexboxer/pen/WNmwVad) |
 | 熊大 | [CodePen](https://codepen.io/asiating/pen/vYPKBEg) |
| MikeLin | [CodePen](https://codepen.io/MikeLin0701/pen/JjzKPKY) |
 | MY | [CodePen](https://codepen.io/ahmomoz/pen/JjzKPJX) |
 | yu.t_liu | [CodePen](https://codepen.io/YuT200053/pen/NWJrKbB) |
 | elena | [CodePen](https://codepen.io/elena0127abc/pen/bGZebWj) |
 | 風羽 | [CodePen](https://codepen.io/Joy-Huang/pen/PoLNXYP?editors=1010) |
 | chihyang | [CodePen](https://codepen.io/hike1707/pen/yLwJBEm) |
 |Eden|[Codepen](https://codepen.io/iseden/pen/oNVLvqZ)|
 | _amaaaa |[Codepen](https://codepen.io/Alicia-Chu/pen/eYXzYOZ)|
  | ann6212 |[Codepen](https://codepen.io/yqmegupa-the-styleful/pen/bGZeGRb?editors=1010)|
 | nini1202desu | [CodePen](https://codepen.io/tvxq5206/pen/PoLzYqJ?editors=1010) |
  | FangFang|[Codepen](https://codepen.io/FangFang09/pen/dyrXyjg)|
  | macihuang|[Codepen](https://codepen.io/macy1215/pen/ExMyNaq)|
  | PoWei#8484|[Codepen](https://codepen.io/harrison-wei-lai/pen/jOJryqO)|
 | 小夏 | [CodePen](  https://codepen.io/michaelhsia/pen/KKEMmeY) |
| Ariel| [CodePen](https://codepen.io/ariel0510/pen/ZEPOKQP) |
| RayRay | [CodePen](https://codepen.io/CityRay/pen/OJqXjRM) |
| jeremyChan | [CodePen](https://codepen.io/nudieisgood/pen/NWJrXoa) |
| Neil | [CodePen](https://codepen.io/peiqun/pen/WYzzYX) |
| .zack_p | [CodePen](https://codepen.io/Designer-PH/pen/KKEMLYY) |
| JUN_ | [CodePen](https://codepen.io/Jun-L/pen/abMmOdg) |
| fanshu0303 | [CodePen](https://codepen.io/JuiHsuanLee0303/pen/QWoKEey) |
| runweiting | [CodePen](https://codepen.io/weiting14/pen/RwdGgdq) |
| PayRoom |[CodePen](https://codepen.io/water38198/pen/JjzRygq)
| Tom | [CodePen](https://codepen.io/sp1daTomm/pen/eYXzoNG) |
| Vivian2857 | [CodePen](https://codepen.io/vivian_lin/pen/dyrpJxb?editors=1010) |
| haru | [CodePen](https://codepen.io/haru_portfoilo/pen/QWoKQzZ?editors=1010) |
| Rock | [CodePen](https://codepen.io/xiu43317/pen/wvOzEJa) |
| Chris | [CodePen](https://codepen.io/cjtseng07/pen/vYPXQva) | 
| hua | [CodePen](https://codepen.io/LHua/pen/bGZwPem?editors=1010) | 
| 貢波波夫 | [CodePen](https://codepen.io/mxgrfgcr-the-bashful/pen/NWJbKPj) |
| celinelinnn |[CodePen](https://codepen.io/celinephoebe/pen/LYabver)|
 | 黃士桓 | [codePen](https://codepen.io/shr-huan-huang/pen/QWodjqz) |
  | xuan | [codePen](https://codepen.io/xuan0915/pen/KKEaVzw?editors=1010) |
 | 狸貓 | [CodePen](https://codepen.io/tanuki320/pen/QWodBOZ?editors=1010) |
 | shuuu | [CodePen](https://codepen.io/jybvfzos-the-bashful/pen/OJqWdGp) |
  | hsuhsusophie | [CodePen](https://codepen.io/hsuhsusophie/pen/OJqpWrv) |
  | carrie | [CodePen](https://codepen.io/echocarriet/pen/ExMWvzw)|
  | 翔.Ben | [CodePen](https://codepen.io/energy95272z/pen/qBvmGgJ)|
  | santu0868 | [CodePen](https://codepen.io/HatsumiSan/pen/jOJLMeX) |
   | peggy | [CodePen](https://codepen.io/peggylai/pen/ZEPJoEj) |
   |yuling| [Codepen](https://codepen.io/igzdflpu/pen/ExMwQrZ?editors=1010)|
   |關關| [Codepen](https://codepen.io/ashkuan/pen/KKEZOqN)|
   |WA| [Codepen](https://codepen.io/ldddl/pen/MWxdveM)|
   | yuan! | [CodePen](https://codepen.io/townyuan/pen/bGJVwmV) |
  
<!-- 

 | user | [CodePen]() |

-->

