v-model对于表单的type不同，会有不同的事件处理，以及我们可能处理的数据类型也不同，今天就来复习一下v-model的使用

基本语法

text

当表单为text时，采用v-model绑定data数据对象，写法

data:{
	user:{name:undefined}
}

<input v-model="user.name" type="text" />

checkbox

使用v-model，我们可以抛弃name值，当选中时，该选项的value与property值绑定。

<input type="checkbox" value="苹果" v-model="love" />

data:{
	love:[]
}

对于复选框，我们一般都将数据对象设置成数据类型，这样复选框选中后的值就可以全部进入到数据中

radio

以前写html的时候，radio表单一定是需要设置成相同的name才可以变成多选一，在vue中，我们也不需要写name，直接v-model绑定数据即可

      <label>
        足球
        <input type="radio" value="足球" v-model="one" />
      </label>
      <label>
        篮球
        <input type="radio" value="篮球" v-model="one" />
      </label>

data:{
	one:'',
    }

select

以前我们可能需要很多value来传递选中的option的value值，但是vue已经帮我们做好了这部分工作，我们不需要关注value，只需要正常写值就行了

      <select v-model="one">
        <option disabled>请选择</option>
        <option>詹姆斯</option> 
        /*如果写了value，那就以value为准*/
        <option>科比</option>

data:{
	select:[],//如果是多选则使用数组
    select:'' 如果是单选则使用空值或undefined、null等
}

v-for

在使用option时，一般我们都是直接使用某个数据做渲染上去的，所以使用v-for会非常方便

      <select v-model="one">
        <option disabled>请选择</option>
        <option v-for="(item,key) in items" :key="key">{{item}}</option>

data:{
items: ["詹姆斯", "科比"],
}

注意，使用v-for的时候一定要记得绑定key。

修饰符

.lazy

在type为text时，由于数据绑定的原因，我们输入的内容会同步到数据对象上，但是一般情况下我们需要的是输入完成后才同步的，所以我们可以使用.lazy修饰符，它的作用就是等到触发一个change事件后才同步,写法：

 v-model.lazy="user.name"

.number

这个修饰符的作用就是使用parseInt把输入的内容变成number类型

.trim

这个修饰符的作用就是去掉两边空白

组件上使用表单

在实际开发时，我们肯定会面临数据在主组件中，然而v-model需要在子组件上使用的情况，vue默认不可以在子组件上修改父组件的值，只能通过props传递，那么我们如何通过表单来修改父组件上的值呢？

参考我写的这篇博客juejin.cn/post/688308…

我们可以使用$emit()，但是有一点不同的是，$emit()的第二个组件，是e.target.value下面不同写法的代码，我将标注出不同风格的代码不同的地方。

不使用v-model

在这种情况下，我们纯接收props数据后，让子组件触发一个表单修改事件，然后使用$emit()将修改的内容传给父组件

// child.vue 子组件代码
<template>
  <div>
    {{ msg }} 
    <input type="text" @change="input" /> //这里使用change事件
  </div>
</template>
<script>
export default {
  props: ["msg"], //子组件收到父组件上的数据了
  methods: {
    input(e) {
      this.$emit("update:msg", e.target.value);//注意这里是将事件触发元素的value也就是input的value暴露出去
    },
  },
};
</script>

//父组件代码
<Child :msg="user.name" v-on:update:msg="user.name = $event" />

.sync写法

使用.sync的写法必须满足一个条件，那就是必须写成$emit(“update:xxx”,xx)的形式，不然会报错。

// 父组件代码
<Child :msg.sync="user.name" />

v-model写法

//child.vue 子组件代码
export default {
  model:{ //这里一定要加model选项
props:"msg",
event:"update:msg"
  },
  props: ["msg"],
 ...省略

//父组件代码
<Child v-model="user.name" />

参考文档：自定义组件——vue.js官方文档

v-model原理

v-model实际上就是v-bind和@input或者@change事件的语法糖。我们也可以模拟一个v-model

<input type="text" :value="user.password" @input="input" />

...
  methods: {
    input(e) {
      console.log(e.target.value);//这个就是事件对象input的值
      this.user.password = e.target.value;
    },

上面的代码我们使用了v-on:input事件和绑定:value模拟v-model的效果，在方法中，我们拿到事件对象e.target，将它的值value赋给数据对象user.password。跟v-model的效果是一致的

v-model与.sync的切换使用