vue中v-text，v-html, v-model, {{}}之间的异同

墨蓝 2021-09-15 08:46 110阅读 0赞

首先我们知道vue中有很多自定义指令，以v- 开头，例如：v-text，v-bind，v-model, v-if,等

在这些指令中，部分指令之间是很容易被混淆，所以今天决定自己总结一下以下几个相似指令之间的异同：

1.v-text

v-text是用于操作纯文本，它会替代显示对应的数据对象上的值。当绑定的数据对象上的值发生改变，插值处的内容也会随之更新。注意：此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值。其中：v-text可以简写为\{ \{\}\},并且支持逻辑运算。

\[html\]  [view plain][]   [copy][view plain]

1.  **<****div** id="app"**>**  
2.    \{ \{ message \}\}  
3.  **</****div****>**  
4.  var app = new Vue(\{  
5.     el : '\#app',  
6.     data : \{  
7.      message : 'hello world'      
8.   \}  
9.  \})

注：vue中有个指令叫做 v-once 可以通过v-once与v-text结合，实现仅执行一次性的插值

\[html\]  [view plain][]   [copy][view plain]

1.  **<****span** v-once**>**这个将不会随msg属性的改变而改变: \{ \{ msg \}\}**</****span****>**

2.v-html

v-html用于输出html，它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出。

\[html\]  [view plain][]   [copy][view plain]

1.  **<****div** id="app"**>**  
2.      **<****p** v-html="html"**>****</****p****>**  
3.  **</****div****>**

\[javascript\]  [view plain][]   [copy][view plain]

1.  let app = **new** Vue(\{  
2.          el: "\#app",  
3.          data: \{  
4.              html: "<b style='color:red'>v-html</b>"  
5.          \}  
6.      \});

3.v-model

v-model通常用于表单组件的绑定，例如input，select等。它与v-text的区别在于它实现的表单组件的双向绑定，如果用于表单控件以外标签是没有用的。

\[html\]  [view plain][]   [copy][view plain]

1.  **<****div** id="app"**>**  
2.    **<****input** v-model="message " **/>**  
3.  **</****div****>**  
4.  var app = new Vue(\{  
5.     el : '\#app',  
6.     data : \{  
7.      message : 'hello world'      
8.   \}  
9.  \})

4.\{ \{\}\}

\{ \{\}\}是v-text的简写形式

[view plain]: https://blog.csdn.net/u014541501/article/details/78181729#