Vue 表单输入绑定

封面图 • 2025-11-16 • Vue

在 Vue 中，**表单输入绑定**是用于将用户在表单中的输入（如文本框、复选框、单选按钮、下拉菜单等）与 Vue 实例的数据进行双向绑定的机制。Vue 提供了 `v-model` 指令来实现这一功能。

---

## 一、基本用法：`v-model`

`v-model` 是 Vue 中用于表单输入绑定的指令，它会根据不同的输入类型自动选择合适的处理方式。

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

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

### 2. 多行文本框（`<textarea>`）

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

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

```html
<template>
  <div>
    <label><input type="radio" value="A" v-model="selected"> A</label>
    <label><input type="radio" value="B" v-model="selected"> B</label>
    <p>你选择了：{{ selected }}</p>
  </div>
</template>

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

#### 单个复选框

```html
<template>
  <div>
    <input type="checkbox" v-model="checked">
    <label>是否勾选：{{ checked }}</label>
  </div>
</template>
```

#### 多个复选框（绑定数组）

```html
<template>
  <div>
    <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>
  </div>
</template>

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

```html
<template>
  <div>
    <select v-model="selectedOption">
      <option disabled value="">请选择</option>
      <option>A</option>
      <option>B</option>
      <option>C</option>
    </select>
    <p>你选择了：{{ selectedOption }}</p>
  </div>
</template>

---

## 二、修饰符（Modifiers）

`v-model` 支持一些修饰符，用于更精细地控制输入行为：

| 修饰符       | 说明                          |
|--------------|-------------------------------|
| `.lazy`      | 在 `change` 事件而非 `input` 事件同步数据 |
| `.number`    | 自动将输入值转换为数字         |
| `.trim`      | 自动过滤输入的首尾空格         |

### 示例：

```html
<input v-model.lazy="msg">          
<input v-model.number="age">        
<input v-model.trim="username">     
```

---

## 三、自定义组件使用 `v-model`

你可以通过 `modelValue` 和 `update:modelValue` 来在自定义组件中支持 `v-model`。

```html

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

使用：

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

---

## 四、总结

| 输入类型       | 使用 `v-model` | 数据绑定方式         |
|----------------|----------------|----------------------|
| 文本框         | ✅             | `data.message`       |
| 多行文本框     | ✅             | `data.message`       |
| 单选按钮       | ✅             | `data.selected`      |
| 复选框         | ✅             | `data.checked` 或 `data.options` |
| 下拉选择框     | ✅             | `data.selectedOption` |

---

如果你有具体的场景或问题（比如表单验证、动态表单等），可以告诉我，我可以提供更详细的解决方案 😊