vue中的v-model

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第17天，点击查看活动详情

v-model的使用和原理

在我们使用vue开发的时候常听到一个概念，vue实现了数据的双向绑定，那如何实现的呢？就是通过v-model来实现的

表单控件在开发中是很常见的，在vue中就是使用v-model指令来实现表单元素和数据的双向绑定，无论是修改input的值还是data里的值，都是同步的，data里的值已经绑定到input上面了

<div id="app">
    <input type="text" v-model="msg">
    <span>{{msg}}</span>
</div>

const app=new Vue({
  el:'#app',
  data:{
    msg:'v我50',
  }
})

那么v-mode是如何实现双向绑定的呢？其实是通过v-bind和v-on指令来实现的，使用v-bind动态绑定value属性为data里的值，这样data里的值是什么，input的值就是什么，数据的单向绑定就实现了。然后通过v-on来绑定input的input事件，每次输入都会触发input事件，而输入的值在event对象里，每次触发input事件就把event对象里输入的值赋值给data里的值，这样一来就实现了双向绑定了

<div id="app">
    <input type="text" :value="msg" @input="input">
    <span>{{msg}}</span>
</div>

const app=new Vue({
  el:'#app',
  data:{
    msg:'v我50',
  },
  methods: {
    input(event){//事件对象
      this.msg=event.target.value
    }
  }
})

v-model修饰符的使用

我们使用input控件的时候可以使用修饰符，v-model也有修饰符，常用的修饰符有lazy修饰符，number修饰符，trim修饰符了

lazy修饰符

默认情况下v-model是在input事件中同步输入框的数据，一旦有数据发生改变对应的data中的数据也会改变，每输一个字符或者使用拼音还没确定字符都会实时双向绑定 而我们只需要在失去焦点或者回车的时候才实现双向绑定，就需要用到lazy修饰符了，只需要在v-model后面跟上.lazy就行了

number修饰符

在input控件里无论输入数字还是字母，都会被当作字符串类型来处理，我们希望输入的是数字类型，就可以使用number修饰符了

<div id="app">
    <input type="text" v-model.number="msg">
    <span>{{msg}}</span>
</div>

trim修饰符

在input控件里我们想要去除首尾的空格可以使用trim修饰符过滤掉左右两边的空格

<div id="app">
    <input type="text" v-model.trim="msg">
    <span>{{msg}}</span>
</div>