---
# System prepended metadata

title: 資料呈現於畫面上
tags: [Vue3 實戰班]

---

---
tags: Vue3 實戰班
---

# 資料呈現於畫面上

如果要將 Vue Data 呈現於畫面上，主要有以下的方式：

範例重點：

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


<iframe height="300" style="width: 100%;" scrolling="no" title="資料呈現於畫面上" src="https://codepen.io/Wcc723/embed/abgJqgg?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/Wcc723/pen/abgJqgg">
  資料呈現於畫面上</a> by Casper (<a href="https://codepen.io/Wcc723">@Wcc723</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>