---
title: Vue - v-text
tags: Vue, 六角學院
---

###### tags: `v-text` `六角學院`

###### *date: 2022 / 12/ 28*

# ✏ 綁定內容於畫面上 v-text
## 綁定資料於畫面上
- **{{ }}**: 使用雙大括號中間可直接插入 **元件資料** 或者**任何表達式內容** 來呈現。
- **v-text**: (綁定在html 標籤元素內)
- **v-model**: 畫面與資料雙向綁定
- **v-html:** 可同時輸出 HTML 結構，在使用上要特別注意：請只對可信內容使用 HTML 插值，絕不要對用戶提供的內容使用插值。詳細說明可參考 [XSS 攻擊](https://cn.vuejs.org/v2/api/#v-html)
- **v-once:** 只進行一次畫面渲染，資料更新時，畫面不會再更動。

## 進階技巧:
- 使用**表達式**將資料進行畫面渲染
- **樣板字面值**:

     {{ `${name} 在 ${position} 吃早餐`}}

- **反轉字串**:

	 {{ text.split('').reverse().join('') }}

- **綁定 methods(直接呼叫函式)**:

     {{ say('Jimmy')}}

- **運算**:

      {{ 2 * 2 }}

## 完整程式碼:
<!-- codepen -->
<iframe height="300" style="width: 100%;" scrolling="no" title="Vue 3 資料呈現於畫面指令" src="https://codepen.io/pohxiqqo/embed/ZERPZmm?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/pohxiqqo/pen/ZERPZmm">
Vue 3 資料呈現於畫面指令</a> by 方振吉 (<a href="https://codepen.io/pohxiqqo">@pohxiqqo</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>