# v-text(綁定內容於畫面上)

1.v-text (純文字渲染) 與 {{...}} (Mustache)


※ {{...}} : 直接將 Vue 元件內的 data 資料名稱，貼上即可運作； 例: {{name}}

※ v-text : DOM 的標籤內，輸入 v-text="name"的指令，即可運作；兩者不同之處再於，使用 v-text 標籤的方式，可以變更字體粗、細 ； 例: `<p><strong v-text="name"></strong>在</p>` ，這是使用標籤渲染的好處。

---------------------------------------------------------------------------

2.v-html 原始字串


※ v-html : 若 data 資料名稱的內容有 DOM標籤屬性的狀態，使用 v-html 可將標籤完整的輸出 ； 例: `<div v-html="rawHtml"></div>` ，在網頁畫面呈現上，使用 Elements 檢查可以發現`<p>`標籤被插入至`<div>`標籤內； `<div v-html="rawHtml"><p>小明在早餐店吃早餐</p></div>`

---------------------------------------------------------------------------

3.v-once 單次綁定


※ v-once : 用途在於初始化那一次可以變更；而之後的資料變更則無法運作。

< 如下圖 >


input 欄位內的 v-model="name" 不管變更了甚麼文字內容，被`<p v-once>{{name}}</p>`單次綁定的標籤內容都不會做異動。

---------------------------------------------------------------------------

進階技巧:表達式


※需特別注意:

1.綁定 methods:`<p>{{ say('杰倫')}}</p>` ，將 Vue元件的 methods(方法) 內的函式，呼叫出來，並代入 杰倫 的參數值。

2.v-pre : 可使文字內容不進行轉譯 < 如下圖 >