vue v-model实现
v-model 的基本用法
在 Vue 中，v-model 是一个语法糖，用于在表单元素和组件上实现双向数据绑定。它自动将表单输入的值与 Vue 实例的数据属性同步。
表单元素示例：
<input v-model="message" placeholder="输入内容">
<p>输入的值：{{ message }}</p>data() {
return {
message: ''
}
}v-model默认绑定到value属性（如input、textarea）或checked属性（如checkbox、radio）。- 用户输入会实时更新
message，反之修改message也会更新输入框的值。
v-model 的修饰符
Vue 提供了一些修饰符来扩展 v-model 的行为：
-
.lazy
将输入事件从input改为change，即仅在失去焦点时同步数据：<input v-model.lazy="message"> -
.number
自动将输入值转为数字类型：<input v-model.number="age" type="number"> -
.trim
自动去除输入内容的首尾空格：<input v-model.trim="text">
在组件中使用 v-model
在自定义组件中，v-model 默认通过 props 和自定义事件实现：
-
父组件：
<CustomInput v-model="inputValue" /> -
子组件：
<input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" >props: ['modelValue'], emits: ['update:modelValue']
- 默认情况下，
v-model绑定到modelValue属性和update:modelValue事件。 - 可以通过
v-model:arg指定自定义参数（Vue 3+）：<CustomInput v-model:title="pageTitle" />
多选框和单选按钮的绑定
-
多选框（单个）：
<input type="checkbox" v-model="isChecked">绑定到布尔值。
-
多选框（多个）：
<input type="checkbox" v-model="selectedItems" value="A"> <input type="checkbox" v-model="selectedItems" value="B">绑定到数组
selectedItems，值为['A', 'B']。 -
单选按钮：
<input type="radio" v-model="picked" value="One"> <input type="radio" v-model="picked" value="Two">绑定到字符串
picked。
下拉选择框的绑定
<select v-model="selectedOption">
<option value="a">选项A</option>
<option value="b">选项B</option>
</select>- 单选时绑定到字符串
selectedOption。 - 添加
multiple属性可绑定到数组：<select v-model="selectedOptions" multiple>
自定义组件的深层绑定
通过 computed 的 get/set 实现复杂逻辑：
computed: {
fullName: {
get() {
return `${this.firstName} ${this.lastName}`;
},
set(value) {
const [first, last] = value.split(' ');
this.firstName = first;
this.lastName = last;
}
}
}<CustomInput v-model="fullName" />
