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的简写形式