---
# System prepended metadata

title: "\U0001F3C5 Day1 - Vue.js 的基礎魔法：v-text、v-html、v-once"
tags: [2025 Vue 前端體驗營]

---

# 🏅 Day1 - Vue.js 的基礎魔法：v-text、v-html、v-once


## v-text、v-html、v-once
如果要將 Vue Data 呈現於畫面上，主要有以下的方式：

- `{{}}`：使用雙大括號中間可直接插入元件資料或者任何表達式內容來呈現。
- `v-text`：與前者相同，同時可運用在標籤上。
- `v-once`：綁定的標籤僅會輸出一次資料於畫面上，往後的更新將不會再做更動。
- `v-html`：可同時輸出 HTML 結構，在使用上要特別注意：**請只對可信內容使用 HTML 插值，絕不要對用戶提供的內容使用插值。（XSS 攻擊）**，詳細說明可參考：https://cn.vuejs.org/api/built-in-directives.html#v-html

題目
---
操作 [這個模板](https://codepen.io/yen-kg/pen/RwmQXXe)，執行以下要求（只能修改 HTML 的部分）：

1. 操作 class 名稱為 Q1 的 div 標籤，利用 {{ }} 將對應 data 中的資料帶入 HTML 中進行畫面渲染。

2. 操作 class 名稱為 Q2 的 div 標籤，利用 `v-text` 將 rawHTML 帶入。

3. 操作 class 名稱為 Q3 的 div 標籤，利用 `v-html` 將 rawHTML 帶入。

4. 操作 class 名稱為 Q4 的 div 標籤，加入 `v-once`。

## 回報流程

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

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

<!-- 解答：  
<template>
  <div id="app">
    <div class="Q1">
       Ray 身上有 {{ RayMoney }} 元，去超商吃午餐花了 {{ lunchPrice }} 元，買了一杯飲料花了 {{ drinkPrice }} 元
    </div>

    <div class="Q2" v-text="rawHTML"></div>

    <div class="Q3" v-html="rawHTML"></div>

    <div class="Q4" v-once>此欄位為單次綁定 {{ lunchPrice }}</div>
  </div>
</template>
-->

回報區
---

|  #  |    Discord    |                          CodePen / 答案                          |
|:---:|:-------------:|:----------------------------------------------------------------:|
| 01  |      kat      |         [Codepen](https://codepen.io/Nek0u0/pen/qEORvYx)         |
| 02  |     叮咚      |      [CodePen](https://codepen.io/pinchieh-lin/pen/OPyWqvG)      |
| 03  |     water     |        [Codepen](https://codepen.io/wateruby/pen/ZYbLPZK)        |
| 04  |     RUDY      |        [Codepen](https://codepen.io/Rudy-crw/pen/jEbyJWg)        |
| 05  |      YC       |      [Codepen](https://codepen.io/yichieh10002/pen/qEORwEM)      |
| 06  |    登登登     |        [Codepen](https://codepen.io/Duncanin/pen/LEpxvZX)        |
| 07  |     7lun      |   [Codepen](https://codepen.io/mfyvqhsn-the-bold/pen/KwdaYxy)    |
| 08  |     小羊      |      [Codepen](https://codepen.io/allen9630308/pen/RNWKOXa)      |
| 09  |      Gui      |       [CodePen](https://codepen.io/guitimliu/pen/RNWKmMg)        |
| 10  |     DaRon     |       [CodePen](https://codepen.io/daron0811/pen/wBKgLBQ)        |
| 11  |     雪粒      |  [CodePen](https://codepen.io/bzykdfhw-the-bashful/pen/Byopgga)  |
| 12  |     Loder     | [CodePen](https://codepen.io/rgbkomhs-the-flexboxer/pen/PwPWMWq) |
| 13  |  haohaoliao   |      [Codepen](https://codepen.io/yuyuyuhaohao/pen/LEpWPzG)      |
| 14  |   wei_0982    |        [Codepen](https://codepen.io/nico-lai/pen/WbQpeJg)        |
| 15  |   yu005620    |     [Codepen](https://codepen.io/yu-chin-chiang/pen/qEOrBEr)     |
| 16  |    haojing    |          [Codepen](https://codepen.io/hjxu/pen/zxvZYqB)          |
| 17  |     dean      |        [Codepen](https://codepen.io/ch933114/pen/vENxEJo)        |
| 18  |      dPi      |   [Codepen](https://codepen.io/snijqlte-the-bold/pen/Qwjpwmv)    |
| 19  |   蜜桃果茶    |        [Codepen](https://codepen.io/jia-yiii/pen/azvJOwo)        |
| 20  |      Lin      |        [Codepen](https://codepen.io/Lin4611/pen/raOyVoN)         |
| 21  |    rio_wei    |         [Codepen](https://codepen.io/wei_wu/pen/xbwqGoO)         |
| 22  |      wei      |        [Codepen](https://codepen.io/weipened/pen/pvjeJOY)        |
| 23  |     阿昌      |      [Codepen](https://codepen.io/ychleo102615/pen/myeWePL)      |
| 23  |      Sam      |   [Codepen](https://codepen.io/Sammy-the-styleful/pen/NPGpGvZ)   |
| 24  |     阿鵝      |        [Codepen](https://codepen.io/noracami/pen/bNVqERe)        |
| 25  | William Hsieh |   [Codepen](https://codepen.io/lsaimqxa-the-vuer/pen/xbwqEpy)    |
| 26  |     poyi      |   [Codepen](https://codepen.io/poyi-the-flexboxer/pen/ZYbeOqB)   |
| 27  |   David0799   |       [Codepen](https://codepen.io/David0799/pen/JoYWbvY)        |
| 28  |     牙山      |       [Codepen](https://codepen.io/Tzuru-Chen/pen/pvjeRyM)       |
| 29  |     鼠鼠      |       [Codepen](https://codepen.io/elim85223/pen/azvJwbN)        |
| 30  |    ya_meow    |  [Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/gONLJKR)  |
| 31  |  thchen2002   |       [Codepen](https://codepen.io/thchen2002/pen/myeWBNq)       |
| 32  |  Candace   |       [Codepen](https://codepen.io/Candace802/pen/raOypzp)       |
| 33  |  Clarence   |       [Codepen](https://codepen.io/Clarence-Lin/pen/raOyvvd)       |
| 33  |  Oria   |       [Codepen](https://codepen.io/kajing/pen/ZYbeVgo)       |
| 34  |  bonnieli1414   |       [Codepen](https://codepen.io/bonnieli1414/pen/vENxbEO)       |
| 35  |  emmayo   |       [Codepen](https://codepen.io/emmayo/pen/yyYMrya)       |
| 36 | DY | [Codepen](https://codepen.io/dorihung/pen/EaVmxGW) |
| 37 | jimmy | [Codepen](https://codepen.io/JimmyMao/pen/gbaWPOE) |
| 38 | Holly | [Codepen](https://codepen.io/JimmyMao/pen/gbaWPOE) |) |
| 39 | 地瓜 | [Codepen](https://codepen.io/huangtzuchin/pen/PwPmzKB) |
| 40 | 阿Q | [Codepen](https://codepen.io/qqyu/pen/WbQjGeN) |
| 41 | 地呱 | [Codepen](https://codepen.io/LHung/pen/NPGjBLJ) |
| 42 | yi | [Codepen](https://codepen.io/5-1/pen/KwdmByL) |
| 43 | Clove_墨 | [Codepen](https://codepen.io/CloveTseng1026/pen/RNWVzOy) |
| 44 | Momoze | [Codepen](https://codepen.io/mleczmam-the-typescripter/pen/WbQOvGp) |
| 45 | ann.328 | [Codepen](https://codepen.io/yqmegupa-the-styleful/pen/OPygXXz) |
| 46 | wanghuaiying | [Codepen](https://codepen.io/huaiying/pen/YPyQWNZ) |
| 47 | 阿kai | [Codepen](https://codepen.io/kaihuang3013/pen/bNVRwvG) |
| 48 | teresa | [Codepen](https://codepen.io/teresa150029/pen/raOwWbP) |
| 49 | Hugh | [Codepen](https://codepen.io/Hugh-Chen/pen/MYaoOmx) |
| 50 | Rexlin| [Codepen](https://codepen.io/Rexlin595/pen/PwPKBBJ) |
| 51 | Allen_Lin | [CodePen](https://codepen.io/lcf7891/pen/dPYzrrO) |
| 52 | Sam.S.T.Y | [Codepen](https://codepen.io/Sam-Yang-the-animator/pen/qEOXGbY) |
| 53 | 黛西 | [Codepen](https://codepen.io/ChiashengLin/pen/MYavdEo) |
| 54 | 肉桂卷 | [Codepen](https://codepen.io/ginnlee/pen/EaVwOdz) |
| 55 | 禹成林 | [Codepen](https://codepen.io/useirin/pen/LEpOeJx) |
| 56 | 邵 | [Codepen](https://codepen.io/ukscrlno-the-typescripter/pen/RNWQNXg) |
| 57 | ScarT | [Codepen](https://codepen.io/Acadia/pen/GgpQdKJ) |
| 58 | 豆子 | [Codepen](https://codepen.io/Beanhuang/pen/KwdoWvy) |
| 59 | 白雪 | [Codepen](https://codepen.io/weiwei032835-the-styleful/pen/YPyLPBP) |
| 60 | Chen | [Codepen](https://codepen.io/JGM-C/pen/gbaKRme) |
| 61 | Toung | [Codepen](https://codepen.io/Toung/pen/bNVxMjP) |
| 62 | Rogan | [Codepen](https://codepen.io/RoganHsu/pen/raxBLWQ) |
<!--
   | 排序 | Discord | [Codepen]() |
-->