vmodel详解

一、vmodel语法糖

vmodel是Vue.js提供的一种语法糖，它可以方便地实现数据的双向绑定。一个v-model绑定一个变量，其响应式语法会将DOM元素的值与数据变量保持同步。

代码中的v-model指令会将元素的value属性与Vue实例的message变量保持同步，当message变量发生变化时，输入框内的内容也会发生变化，反之亦然。

v-model还可以绑定到其他输入类型的DOM元素上，比如checkbox、radio、textarea等。

二、vmodel修饰符

在某些情况下，我们可以为v-model指令加上修饰符，来扩展v-model指令的功能。Vue提供了很多v-model指令的修饰符，下面介绍最常用的一些。

1. .lazy修饰符：指定元素的改变会在“change”事件触发时而不是“input”事件触发时更新。

2. .number修饰符：将用户的输入转换成数字类型，v-model绑定的变量也会变成数字类型。

3. .trim修饰符：自动过滤用户输入的首尾空格。

三、vmodel可以绑定两个值吗

v-model指令只能绑定一个值，如果需要绑定多个值，需要使用Vue提供的计算属性来实现。

computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

四、vmodel 还有vbind

v-model和v-bind都是Vue.js的指令，但是v-model用于表单元素的双向数据绑定，而v-bind则用于将Vue实例中的数据绑定到表单元素的属性上，实现单向数据绑定。

例如，下面代码将input元素的placeholder属性绑定到Vue实例的message变量上：

五、vmodel和dom元素的value冲突

如果我们在Vue组件中使用了等DOM元素，并且使用了v-model指令，那么我们需要注意的是：在组件模板中使用v-model时，它会把value属性当作默认的 prop，并把当前值当作默认的 prop 值。

Vue.component('my-component', {

props: ['value'],

template: `
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/190062.html