1. v-text

v-text是用于操作純文本，它會替代顯示對應的數據對象上的值。當綁定的數據對象上的值發生改變，插值處的內容也會隨之更新。注意：此處為單向綁定，數據對象上的值改變，插值會發生變化；但是當插值發生變化并不會影響數據對象的值。

其中：v-text可以簡寫為{{}}，并且支持邏輯運算。 <div id="app"> {{ msg }} </div> var app = new Vue({ el : '#app', data : { msg : 'hello world' } })

注：vue中有個指令叫做 v-once 可以通過v-once與v-text結合，實現僅執行一次性的插值。

<span v-once>這個將不會隨msg屬性的改變而改變: {{ msg }}</span>

2. v-html

v-html用于輸出html，它與v-text區別在于v-text輸出的是純文本，瀏覽器不會對其再進行html解析，但v-html會將其當html標簽解析后輸出。

<div id="app"> <p v-html="html"></p> </div> let app = new Vue({ el: "#app", data: { html: "<b style='color:red'>v-html</b>" } });

3. v-model

v-model通常用于表單組件的綁定，例如input，select等。它與v-text的區別在于它實現的表單組件的雙向綁定，如果用于表單控件以外標簽是沒有用的。

<div id="app"> <input v-model="message " /> </div> var app = new Vue({ el : '#app', data : { message : 'hello world' } })

---

本文鏈接：https://blog.csdn.net/u014541501/article/details/78181729

總結

以上是生活随笔為你收集整理的vue学习：v-text，v-html, v-model, {{}}之间的异同的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。