v-bind 与 b-model 的异同

一、相同点:两者都能实现数据绑定

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这些表单元素上。

不同点:

  1. v-bind是数据绑定,没有双向绑定效果,但不一定在表单元素上使用,任何有效元素上都可以使用;
  2. v-model是双向绑定,基本上只用在表单元素上;
  3. 当v-bind和v-model同时用在一个元素上时,它们各自的作用没变,但v-model优先级更高,而且需区分这个元素是单个的还是一组出现的。

参考文档:vue中v-model和v-bind绑定数据的异同

posted @ 2021-04-15 11:20  清和时光  阅读(238)  评论(0编辑  收藏  举报