v-text,v-html等區別

首先咱們知道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的簡寫形式