一、相同点:两者都能实现数据绑定
1、v-bind
v-bind
简写为英文的冒号 :
,它的用法是后面加冒号,跟上html元素的attributions,例如
<p v-bind:class="myclass">
解读:以上代码如果不加 v-bin:
这这个p标签有一个类叫myclass,没有任何数据参与进来。当加上v-bind:之后,就不一样了。它的值classed不是字符串,而是vue实例对应的data.classed的这个变量。也就是说data.classed是什么值,它就会给class属性传递什么值,当data.classed发生变化的时候,class属性也发生变化,这非常适合用在通过css来实现动画效果的场合。除了class,其他大部分html原始的属性都可以通过这种方式来绑定,而且为了方便,它可以直接缩写成冒号形式,
var app = Vue({
el: '#app',
template: '<img :src="src">',
data: {
src: '',
},
beforeMount() {
fetch(...).then(...).then(res => this.src = res.src) // 这里修改了data.src
},
})
上面这段代码中,默认情况下data.src是空字符串,也就说不会有图片显示出来,但是当从远端获取到图片地址之后,更新了data.src,图片就会显示出来了。
2、v-model
v-model主要是用在表单元素中,它实现了双向绑定。双向绑定大家都非常熟了,简单的说就是默认情况下,它跟上面两种情况的数据绑定是一样的,实例的data.name发生变化的时候,对应的试图中也会发生变化。但是v-model绑定后,它还会反过来,在input中手动输入新的内容,会反过来修改data.name的值,如果在视图中其他地方使用到了data.name,那么这个地方就会因为data.name的变化而变化,从而实现关联动态效果。
var app = Vue({
el: '#app',
template: '<label><input v-model="name">{{name}}</label>',
data: {
name: '',
},
})
上面<input>
中绑定了name,那么当input的value发生变化时,data.name就会跟着发生变化,而data.name变化了{{name}}的地方也会跟着变化。
v-model是一种双向绑定,那么也就是说,你绑定的元素得有机会改变值。所以实际上v-model基本上只会用在input, textarea, select这些表单元素上。
不同点:
- v-bind是数据绑定,没有双向绑定效果,但不一定在表单元素上使用,任何有效元素上都可以使用;
- v-model是双向绑定,基本上只用在表单元素上;
- 当v-bind和v-model同时用在一个元素上时,它们各自的作用没变,但v-model优先级更高,而且需区分这个元素是单个的还是一组出现的。