---
# System prepended metadata

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

---

---
tags: Vue 直播班 - 2022 冬季班
---
# 🏅 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。


## 回報流程

將答案寫在 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>
-->




回報區
---


|     Discord      |                           CodePen / 答案                            |
|:----------------:|:-------------------------------------------------------------------:|
| PeihanWang#2530  |  [CodePen](https://codepen.io/PeihanWang/pen/VwBjPNX?editors=1010)  |
|  老皮博士#8050   |          [CodePen](https://codepen.io/li0406/pen/abjZprw)           |
|    泊岸#3466     | [CodePen](https://codepen.io/qoq77416416/pen/OJwXWdd?editors=1010)  |
|    Kimi#9564     |         [CodePen](https://codepen.io/kimihu91/pen/xxJwjGm)          |
|    RJRS#9430     |           [CodePen](https://codepen.io/RJRS/pen/VwBjpaG)            |
|    azami#5986    |           [CodePen](https://codepen.io/azami/pen/bGjeqpb)           |
|  mandylai#4055   |        [CodePen](https://codepen.io/mandy-lai-2/pen/KKBMWMz)        |
|    阿鑫#4346     |   [CodePen](https://codepen.io/Neil1024/pen/MWBepeb?editors=1011)   |
|     Chi#7605     |          [Codepen](https://codepen.io/YoChi84/pen/qByNrNo)          |
|    大頭#8116     |         [Codepen](https://codepen.io/d22495521/pen/poZbeNb)         |
|    JackC#0411    |          [CodePen](https://codepen.io/key0329/pen/bGjeqqN)          |
|  hannahTW#2224   |         [CodePen](https://codepen.io/hangineer/pen/ExpyWZb)         |
|    Paul#7426     |  [CodePen](https://codepen.io/paul-1997/pen/ZEjOerJ?editors=1010)   |
|  LHchien33#6232  |         [CodePen](https://codepen.io/lin_chien/pen/wvxWJPa)         |
|   Benson#6763    |         [CodePen](https://codepen.io/kumashow/pen/WNKxpzx)          |
|    威爾#1694     |          [CodePen](https://codepen.io/WILL_Wu/pen/LYBZWmg)          |
|   RayChen#6088   |        [CodePen](https://codepen.io/raychen1996/pen/RwBRpBz)        |
|    albee#9121    |        [Codepen](https://codepen.io/albee-chang/pen/zYLBZQL)        |
|   PayRoom#8328   |        [CodePen](https://codepen.io/water38198/pen/bGjeqXB)         |
|   小木馬#8760    |         [CodePen](https://codepen.io/wmmtbcsd/pen/qByNreg)          |
|   DIO大人#4776   |        [CodePen](https://codepen.io/oscar-2283/pen/bGjeWpq)         |
|   AuroraC#6539   |          [codepen](https://codepen.io/AuroraC/pen/ExpymKG)          |
|   楊苡安#2752    |        [codepen](https://codepen.io/yi-an-yang/pen/BaPzRLp)         |
| jacky010080#0880 |       [CodePen](https://codepen.io/Yen-Jung-Chen/pen/JjBKNNQ)       |
|   Cheryl#4007    |  [Codepen](https://codepen.io/Cheryl-Hsu/pen/NWBrjaa?editors=1010)  |
|     int#7518     |   [Codepen](https://codepen.io/intHuang/pen/ZEjOeJK?editors=1010)   |
|    yuyu#6310     |   [Codepen](https://codepen.io/yuyu0905/pen/bGjeWMY?editors=1010)   |
|    Sean#3825     |  [Codepen](https://codepen.io/sean_1215/pen/YzjWZqJ?editors=1010)   |
|   粉蒸肉#6214    |         [codepen](https://codepen.io/wrightyu/pen/PoBzmdj)          |
|    圈圈#4060     |     [Codepen](https://codepen.io/wjejfczn-the-bold/pen/MWBemzZ)     |
|    薯餅#3581     |       [Codepen](https://codepen.io/ColdingPoTaTo/pen/OJwXgVQ)       |
|  Asher Xu#9297   |        [Codepen](https://codepen.io/kirakira72/pen/jOprwOQ)         |
|   SASIMI#5099    |        [Codepen](https://codepen.io/sashimi1327/pen/KKBMqWY)        |
|   Wendy77#8049   |          [Codepen](https://codepen.io/Wendy__/pen/bGjeRqm)          |
|  LinaChen#1796   |         [Codepen](https://codepen.io/LinaChen/pen/bGjeRrQ)          |
|  RainLiao#2616   |        [Codepen](https://codepen.io/billpop741/pen/QWBEgze)         |
|    kuku#3118     |        [Codepen](https://codepen.io/mengting-ku/pen/ZEjOJzO)        |
|   Amberhh#2465   |   [codepen](https://codepen.io/Amberhh/pen/MWBevWe?editors=1010)    |
|    無名#6427     |          [Codepen](https://codepen.io/Nomoney/pen/KKBMvMV)          |
| Yuna Huang#2692  |         [Codepen](https://codepen.io/Yuna1002/pen/yLqJobV)          |
|    冬天#5215     |          [Codepen](https://codepen.io/winter_/pen/OJwXjxL)          |
|   Bella_#1587    |        [Codepen](https://codepen.io/Chen-Bella/pen/OJwXjoV)         |
|  kenki100#0068   |          [Codepen](https://codepen.io/ken100/pen/mdjEBmP)           |
|    阿榮#8277     |   [CodePen](https://codepen.io/mogzbvfl-the-reactor/pen/jOprGGZ)    |
|       aki        |          [codepen](https://codepen.io/aki168/pen/jOpPwGB)           |
|    Fang#4680     |         [Codepen](https://codepen.io/std95174/pen/mdjEqeM)          |
| 出事了阿伯#9923  | [Codepen](https://codepen.io/BradpittLai/pen/qByNVbN?editors=1010)  |
|  Hironaka#7367   | [Codepen](https://codepen.io/Hironaka0815/pen/mdjEqNz?editors=1010) |
|   黑白兔#0684    |         [Codepen](https://codepen.io/johnny329/pen/YzjWYVR)         |
|   魚子醬#5220    |         [Codepen](https://codepen.io/haihsuan/pen/yLqJpEb)          |
|   Austyn#0949    |         [Codepen](https://codepen.io/fish90547/pen/VwBjQzY)         |
|    Tami#6742     |     [Codepen](https://codepen.io/wqsdqbjn-the-vuer/pen/zYLBRJQ)     |
|  christina#6185  |        [Codepen](https://codepen.io/chrisc0210/pen/dyjXdrM)         |
|   Wendy3#5615    |          [Codepen](https://codepen.io/wendy03/pen/BaPzrNr)          |
|   Mylène#2481    |        [CodePen](https://codepen.io/hamajibashi/pen/gOjMevK)        |
|   KC_8685#9343   |         [Codepen](https://codepen.io/cathy7411/pen/zYLBJap)         |
|     威0#6919     | [codepen](https://codepen.io/n0918679182/pen/zYLBmxL?editors=1010)  |
|    大衛#4869     |   [codepen](https://codepen.io/exnsrpjc/pen/NWBrONp?editors=1010)   |
|   popeye#5081    |         [codepen](https://codepen.io/popeye_ux/pen/LYBZgLw)         |
|   心幻羽#0056    |        [codepen](https://codepen.io/linglingsyu/pen/rNrLqzq)        |
|    yaru#6308     |   [CodePen](https://codepen.io/lszaietc/pen/KKBMGZo?editors=1010)   |
|    柔柔#1716     |          [Codepen](https://codepen.io/rouchen/pen/jOprezZ)          |
|    RainJ#3480    |         [Codepen](https://codepen.io/RainJCode/pen/ExpydMq)         |
|  masterYan#2480  |    [codepen](https://codepen.io/htzwgoqt-the-looper/pen/KKBMGYx)    |
|    Alex#9978     |   [Codepen](https://codepen.io/datsxzqg-the-selector/pen/poZbxxZ)   |
|    ㄚ翔#8126      |      [codepen](https://codepen.io/engineerjohnson/pen/eYjzQMm)      |
|     PH#2731      |         [codepen](https://codepen.io/lokf9527/pen/ZEjOmmG)          |
|  Jill Lee#0809   |       [codepen](https://codepen.io/chi-ling-lee/pen/gOjMZoN)        |
|   ChloeLo#4858   |          [codepen](https://codepen.io/chloelo/pen/XWBKoYz)          |
|   法希娜#3206     |   [codepen](https://codepen.io/yiiserpf-the-encoder/pen/rNrLoqY)    |
|  Potatolee#7749  |  [codepen](https://codepen.io/potatoleee/pen/VwBjqQV?editors=1010)  |
|  jimmyFang#9575  |         [codepen](https://codepen.io/pohxiqqo/pen/vYaKbqy)          |
|    RyanC#6960    |          [codepen](https://codepen.io/RyanYD/pen/QWBEoKZ)           |
|  Silvialu#4521   |       [codepen](https://codepen.io/Silvia091640/pen/wvxWOjY)        |
|    yoyo#1003     |              [codepen](https://codepen.io/pen/BaPzeXm)              |
| yoyo123456#0577  |   [codepen](https://codepen.io/hungyoyo/pen/poZbXKX?editors=1010)   |
|  enolachen#8031  |        [codepen](https://codepen.io/Chen-Enola/pen/gOjMVmE)         |
| 阿異#4776         | [Codepen](https://codepen.io/yani21399/pen/NWBRKpj)                 |
|    Rena#6249     |        [Codepen](https://codepen.io/aureate0116/pen/qByNerx)        |
|柚子#3958|[Codepen](https://codepen.io/as6625998/pen/Expgxmj)|
|xin#1214|[Codepen](https://codepen.io/SiaoYao/pen/WNKGNZY)|
|Bassjim#0118|[Codepen](https://codepen.io/unrtxbaq/pen/xxJExNq)|
| YC#2522 | [CodePen](https://codepen.io/YCLu/pen/XWBjjMM) |
| 小夜#3809 | [CodePen](https://codepen.io/Naito_K/pen/qByaqMe?editors=1010) |
|Hilda#7085|[Codepen](https://codepen.io/vwquikad-the-vuer/pen/abjmBrg)|
|hungya#0773|[Codepen](https://codepen.io/hungya777/pen/eYjdKZy?editors=1010)|
|米米#1824|[Codepen](https://codepen.io/Jameshsu0407/pen/LYBRWLQ?editors=1010)|
|FiReBrO#0557|[Codepen](https://codepen.io/firebro42/pen/WNKGjBM)|
|阿沁#8176|[Codepen](https://codepen.io/a8322342/pen/MWBjOjL)
|ABOOS#6276|[Codepen](https://codepen.io/guhungyin/pen/vYaXbdY)|
|Hazel.#6020|[CodePen](https://codepen.io/Hazelhsieh/pen/BaPLEwE)|
|Knock59487#9114|[CodePen](https://codepen.io/Zack88/pen/NWBbjOp)|
|Wei#2330|[Codepen](https://codepen.io/ixfjxrbo-the-typescripter/pen/oNMYwWj)|
|CatBoxy#4207|[Codepen](https://codepen.io/nekoboxy/pen/VwBjEKZ)|
|Winnie#1306|[Codepen](https://codepen.io/WinnieWuWinnie/pen/qByNmQd?editors=1011)|
|Mia小福#4473|[Codepen](https://codepen.io/a0950271/pen/VwBmdOZ)|
|sophiee#7015|[codepen](https://codepen.io/sophiee2727/pen/abjBRMQ?editors=1010)|
|How#5806|[codepen](https://codepen.io/howtobefine/pen/WNKoYpd)|
|ViNci#4273|[codepen](https://codepen.io/ViNciSyo/pen/qByqGry)|
|shiuan#4721|[codepen](https://codepen.io/prankaChang/pen/XWBpbxq)|
|JY#5712|[Codepen](https://codepen.io/judy_123/pen/gOjgLKO)|
|Shuo#1596|[Codepen](https://codepen.io/chiangchungshuo/pen/dyjWzLv?editors=1010)|
|Judy Wei#6103|[Codepen](https://codepen.io/Judy0718/pen/KKBmBQm)|
|IreneY#0086|[CodePen](https://codepen.io/HalfPlannedJourney/pen/LYByJJN)|
| Jenny真#7532 | [CodePen](https://codepen.io/wei-chen-wu/pen/zYLwVYd) |
| kevin#6131 | [CodePen](https://codepen.io/xlqjezvc-the-encoder/pen/oNMwLgd?editors=1010) |
| GOD_QWERTYUIOPLKJLKLLOINJ_MASTER#4922 | [CodePen](https://codepen.io/sho666/pen/vYaeWXd?editors=1010) |
|Cookie SSS#6991 | [CodePen](https://codepen.io/sqhjikpa-the-selector/pen/BaPwGjO?editors=1010) |
|Yiru #0236|[Codepen](https://codepen.io/yiru94/pen/QWBvwKr?editors=1010)|
|阿蘇 #8531|[Codepen](https://codepen.io/susu3131/pen/Yzjezyq?editors=1010)|
|Tuhacrt#0008|[codepen](https://codepen.io/Tuhacrt/pen/XWBqxXj)|
|大大#5164|[codepen](https://codepen.io/gzonothk-the-looper/pen/zYLabwR)|
|周周#3503|[CodePen](https://codepen.io/jhoujhou-the-decoder/pen/GRBGboL?editors=1010)|
|Jujubeleven#1036|[Codepen](https://codepen.io/jujubeleven/pen/mdGbWqd?editors=1010)|
|Eileen#6454|[Codepen](https://codepen.io/Eileen-io/pen/mdjWWzX)|
|Eason#7884|[Codepen](https://codepen.io/ASLEO/pen/eYPOQxj)|