Vue组件 v-model

封面图 • 2025-09-22 • Vue

在 Vue 中，`v-model` 是一个非常常用的指令，用于在表单输入元素（如 `<input>`、`<textarea>`、`<select>`）和 Vue 实例的数据之间创建**双向绑定**。它简化了数据的同步过程，使用户输入与数据模型保持一致。

---

## ✅ 一、基本用法

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

在这个例子中，当用户在输入框中输入内容时，`message` 数据会自动更新；反之，如果 `message` 被程序修改，输入框的内容也会随之变化。

---

## ✅ 二、v-model 在不同表单元素中的使用

### 1. 输入框（`<input type="text">`）

```html
<input v-model="username">
```

### 2. 复选框（`<input type="checkbox">`）

- 单个复选框：

```html
<input type="checkbox" v-model="isChecked">
<p>是否勾选：{{ isChecked }}</p>
```

- 多个复选框（绑定数组）：

```html
<input type="checkbox" value="A" v-model="selectedOptions">
<input type="checkbox" value="B" v-model="selectedOptions">
<input type="checkbox" value="C" v-model="selectedOptions">

<p>选中的选项：{{ selectedOptions }}</p>
```

### 3. 单选按钮（`<input type="radio">`）

```html
<input type="radio" value="男" v-model="gender">
<input type="radio" value="女" v-model="gender">

<p>性别：{{ gender }}</p>
```

### 4. 下拉选择框（`<select>`）

```html
<select v-model="selectedOption">
  <option value="A">选项 A</option>
  <option value="B">选项 B</option>
  <option value="C">选项 C</option>
</select>

<p>你选择了：{{ selectedOption }}</p>
```

---

## ✅ 三、v-model 的本质

Vue 的 `v-model` 其实是一个语法糖，它等价于：

```html
<input :value="message" @input="message = $event">
```

也就是说，`v-model` 实际上做了两件事：
- 将 `value` 属性绑定到数据
- 监听 `input` 事件并更新数据

---

## ✅ 四、自定义组件中使用 v-model

如果你在开发自定义组件，也可以使用 `v-model` 来实现双向绑定。

### 1. 父组件中使用：

```html
<custom-input v-model="userInput"></custom-input>
```

### 2. 子组件中定义 props 和 emit：

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

或者更简洁的方式（Vue 2.3+）：

```html
<template>
  <input v-model="innerValue">
</template>

---

## ✅ 五、注意事项

- `v-model` 不支持直接绑定到对象属性（如 `v-model="user.name"`），除非你使用 `.sync` 修饰符或 `v-model.lazy`。
- 对于复杂的数据类型（如对象、数组），`v-model` 仍然可以工作，但需要确保响应性正确设置。
- 使用 `v-model.lazy` 可以将输入事件改为 `change` 事件（延迟更新）。

---

## ✅ 总结

| 表单元素 | v-model 绑定方式 |
|----------|------------------|
| `<input type="text">` | `v-model="message"` |
| `<input type="checkbox">` | `v-model="isChecked"` 或 `v-model="selectedOptions"` |
| `<input type="radio">` | `v-model="gender"` |
| `<select>` | `v-model="selectedOption"` |

---

如果你有具体的场景（比如想用 `v-model` 控制某个组件的状态），欢迎告诉我，我可以给你更详细的示例！