---
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>