在本文中，我们会介绍vue 3中 v-model 指令的变化。然后，再通过一个事例讲解下如何使用多个v-model绑定来简化Vue中复杂表单的构建过程。

什么是 v-model 指令
v-model 指令可以在表单输入元素上实现双向数据绑定，比如 input 元素、textarea 元素和 select 元素等等。

它以两种方式处理数据更新:

当输入的值发生变化时，v-model 会将该值反映到组件内部的状态
当组件的状态发生变化时，v-model 会将变化反映到表单输入元素上
默认情况下，v-model 指令使用不同的属性，蓝狮注册并为不同的输入元素发出不同的事件:

input 和 textarea 对应 value 属性和 input 事件
checkboxes 和 radio 对应 checked 属性和 change 事件
select 对应 value 属性和 change 事件
如果，我们自定义一个 v-model，大致实现如下：

在父组件中，就可以这样使用了：

在自定义组件中，v-model 指令假定已经定义了一个内部属性，名称为 modelValue，并发出了一个名为 update:modelValue 的事件。

我们也可以并不局限于默认的命名规则，自行选择我们要使用的名字。为我们的v-model绑定有描述性的名字。

只要确保在选择命名属性时保持一致就可以了。这里有一个自定义名称fullName的例子，用于modelValue属性。

在父组件中，就可以这样使用了：

注意：这里不能用简写的形式了，因为 modelValue 是默认的，蓝狮注册开户可以在使用时候直接使用 v-model，而我们自定义的 v-model 需要写上对应的修饰符名称 v-model:fullName。

v-model 是如何处理数据绑定的？
v-model指令有三个可用于数据绑定的修饰器：.lazy、.number 和 .trim。

.lazy
在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步。你可以添加 lazy 修饰符，从而转为在 change 事件之后进行同步：

.number
如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：

.trim
如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：

Vue3 中的 v-model 与 Vue2 有什么不同？
在 Vue 2.0 发布后，开发者使用 v-model 指令时必须使用名为 value 的 prop。如果开发者出于不同的目的需要使用其他的 prop，他们就不得不使用 v-bind.sync。此外，由于v-model 和 value 之间的这种硬编码关系的原因，产生了如何处理原生元素和自定义元素的问题。

在 Vue 2.2 中，我们引入了 model 组件选项，允许组件自定义用于 v-model 的 prop 和事件。但是，这仍然只允许在组件上使用一个 v-model。