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

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

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

1.v-text

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

[html] view plain copy
  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
  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
  1. <div id="app">  
  2.     <p v-html="html"></p>  
  3. </div>  

[javascript] view plain copy
  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
  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的简写形式


阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页