首先咱们知道vue中有不少自定义指令,以v- 开头,例如:v-text,v-bind,v-model, v-if,等html

在这些指令中,部分指令之间是很容易被混淆,因此今天决定本身总结一下如下几个类似指令之间的异同:vue

1.v-text浏览器

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

{{ message }}

var app = new Vue({

el : '#app',

data : {

message : 'hello world'

}

})

注:vue中有个指令叫作 v-once 能够经过v-once与v-text结合,实现仅执行一次性的插值

这个将不会随msg属性的改变而改变: {{ msg }}spa

2.v-html.net

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

let app = new Vue({

el: "#app",

data: {

html: "v-html"

}

});对象

3.v-modelblog

v-model一般用于表单组件的绑定,例如input,select等。它与v-text的区别在于它实现的表单组件的双向绑定,若是用于表单控件之外标签是没有用的。

var app = new Vue({

el : '#app',

data : {

message : 'hello world'

}

})

4.{{}}

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

---------------------

做者:yummyH

来源:CSDN

原文:https://blog.csdn.net/u014541501/article/details/78181729

版权声明:本文为博主原创文章,转载请附上博文连接!

Logo

前往低代码交流专区

更多推荐