v-model 使用 - 技术栈

v-model 是一个用于实现表单元素和组件双向数据绑定的指令。

核心作用是将表单输入的值与 Vue 实例的数据属性进行动态绑定，当用户修改输入时，数据会自动更新，反之亦然。

一、基本用法

v-model 常用于表单元素（如 <input>、<textarea>、<select>），直接绑定一个数据属性：

html 复制代码

<template>
  <input v-model="message" placeholder="输入内容">
  <p>输入的内容是：{{ message }}</p>
</template>

<script>
export default {
  data() {
    return {
      message: ""
    };
  }
};
</script>

二、v-model 的原理

v-model 是语法糖，底层基于 value 属性 + input 事件 实现双向绑定。例如，上述代码等价于：

html 复制代码

<input 
  :value="message" 
  @input="message = $event.target.value"
>

三、不同类型表单元素的处理

v-model 会根据不同的表单元素自动适配对应的属性和事件：

元素类型	绑定的属性	触发的事件
`<input type="text">`	`value`	`input`
`<textarea>`	`value`	`input`
`<input type="checkbox">`	`checked`	`change`
`<input type="radio">`	`checked`	`change`
`<select>`	`value`	`change`

四、修饰符（Modifiers）

v-model 支持修饰符，用于处理输入值的特定需求：

.lazy

将 input 事件改为 change 事件（输入完成后更新数据）：
html 复制代码
```
<input v-model.lazy="message">
```
.number

自动将输入值转为数值类型：
html 复制代码
```
<input v-model.number="age" type="number">
```
.trim

自动去除输入值的首尾空格：
html 复制代码
```
<input v-model.trim="username">
```
自定义修饰符

子组件通过 this.$options.model.modifiers 访问修饰符，并根据修饰符对输入值进行加工处理。

五、在自定义组件中使用 v-model

在 Vue 2 中，自定义组件可以通过 model 选项定义 v-model 的绑定行为：

父组件：
html 复制代码
```
<CustomInput v-model="message" />
```

子组件：

html 复制代码

<template>
  <input 
    :value="value" 
    @input="$emit('input', $event.target.value)"
  >
</template>

<script>
export default {
  model: {
    prop: "value",   // 默认是 'value'
    event: "input"   // 默认是 'input'
  },
  props: ["value"]
};
</script>

六、与 .sync 修饰符的区别

v-model ：用于单个数据的双向绑定（默认绑定 value 和 input）。
.sync 修饰符 ：用于多个属性的"双向绑定"（通过 update:propName 事件）。

html 复制代码

<!-- 父组件 -->
<ChildComponent :title.sync="pageTitle" />

<!-- 子组件触发更新 -->
this.$emit('update:title', newTitle);

七、常见问题

为什么输入类型为 number 时，绑定的值仍是字符串？

使用 .number 修饰符或手动转换类型：parseInt(value)。
如何在一个组件中绑定多个 v-model？

Vue 2 不支持多个 v-model，但可以通过 .sync 修饰符实现多属性双向绑定。

总结

v-model 是 value + input 事件的语法糖。
支持 .lazy、.number、.trim 修饰符。
自定义组件通过 model 选项配置 prop 和 event。
在 Vue 2 中，一个组件只能有一个 v-model，多数据流用 .sync。

掌握 v-model 的使用和原理，能更高效地处理表单和组件间的数据交互！