当前位置：首页 > VUE

vue v-model实现

2026-02-20 19:36:11VUE

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 和自定义事件实现：

vue v-model实现

父组件：
```
<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;
    }
  }
}