首先我們知道vue中有很多自定義指令，以v- 開頭，例如：v-text，v-bind，v-model, v-if,等
在這些指令中，部分指令之間是很容易被混淆，所以今天決定自己總結一下以下幾個相似指令之間的異同：
1.v-text
v-text是用於操作純文本，它會替代顯示對應的數據對象上的值。當綁定的數據對象上的值發生改變，插值處的內容也會隨之更新。注意：此處為單向綁定，數據對象上的值改變，插值會發生變化；但是當插值發生變化並不會影響數據對象的值。其中：v-text可以簡寫為{{}},並且支持邏輯運算。
<div id="app">
{{ message }}
</div>
var app = new Vue({
el : '#app',
data : {
message : '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'
}
})
4.{{}}
{{}}是v-text的簡寫形式
---------------------
作者：yummyH
來源：CSDN
原文：https://blog.csdn.net/u014541501/article/details/78181729
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！