v-model修饰符

v-model 提供修饰符来定制双向绑定的行为。

.lazy 修饰符

默认情况下，v-model 在每次 input 事件后同步数据。使用 .lazy 改为在 change 事件时同步：

<input v-model.lazy="msg" />

适用于希望在输入完成后才同步数据的场景。

.number 修饰符

自动将输入值转为数字类型：

<input v-model.number="age" type="number" />

如果值无法被解析，则返回原始值。

.trim 修饰符

自动去除输入首尾的空格：

<input v-model.trim="name" />

组合使用

<input v-model.lazy.trim.number="value" />

修饰符可以组合使用，顺序不影响结果。

自定义修饰符

在自定义组件中可以通过 modelModifiers 实现自定义修饰符：

app.component('my-component', {
  props: {
    modelValue: String,
    modelModifiers: { default: () => ({}) }
  },
  emits: ['update:modelValue'],
  template: `
    <input :value="modelValue"
           @input="$emit('update:modelValue', $event.target.value)" />
  `
})

要点总结

• .lazy 延迟同步（change 事件）
• .number 自动转数字
• .trim 去除首尾空格
• 修饰符可组合使用