当前位置：首页 > news >正文

v-model 总结

news 来源：原创 2025/6/9 20:29:23

v-model 是 Vue 中实现双向数据绑定的核心语法糖，主要用于 表单输入元素 和 自定义组件 的数据绑定。以下是其核心规则、使用场景及代码示例：

一、`v-model` 的核心规则

本质：
v-model 是 :value + @input 的语法糖，自动同步数据和视图。
适用范围：
- 原生表单元素（如 <input>、<select>、<textarea>）。
- 自定义组件（需显式实现 modelValue 和 update:modelValue 事件）。
修饰符：
- .lazy：将 input 事件改为 change 事件（失焦后更新数据）。
- .number：将输入值转为数字类型。
- .trim：自动去除输入值首尾空格。

二、在不同场景中的使用示例

1. 原生表单元素

(1) 文本输入（`<input type="text">`）

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

<script>
export default {
  data() {
    return { message: '' }
  }
}
</script>

(2) 复选框（`<input type="checkbox">`）

单个复选框：绑定布尔值。

<input type="checkbox" v-model="isAgree">
<span>{{ isAgree ? '已同意' : '未同意' }}</span>

多个复选框：绑定数组。

<input type="checkbox" value="vue" v-model="skills">
<input type="checkbox" value="react" v-model="skills">
<p>选择的技能：{{ skills }}</p>

(3) 下拉选择框（`<select>`）

<select v-model="selectedCity">
  <option value="beijing">北京</option>
  <option value="shanghai">上海</option>
</select>
<p>选择的城市：{{ selectedCity }}</p>

2. 自定义组件

(1) 默认绑定（单个 `v-model`）

子组件：需接收 modelValue 并触发 update:modelValue 事件。

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

<script>
export default {
  props: ['modelValue'],
  emits: ['update:modelValue']
}
</script>

父组件：直接使用 v-model 绑定。
```
<CustomInput v-model="message" />
```

(2) 多个 `v-model` 绑定（Vue 3 支持）

子组件：定义多个属性（如 title 和 content）。

<!-- CustomForm.vue -->
<template>
  <input :value="title" @input="$emit('update:title', $event.target.value)">
  <textarea :value="content" @input="$emit('update:content', $event.target.value)"></textarea>
</template>

<script>
export default {
  props: ['title', 'content'],
  emits: ['update:title', 'update:content']
}
</script>

父组件：使用 v-model:属性名 绑定多个值。

<CustomForm 
  v-model:title="formData.title"
  v-model:content="formData.content"
/>

3. 修饰符使用示例

(1) `.lazy`：失焦后更新数据

<input v-model.lazy="message"> <!-- 输入内容后需失焦才会更新 message -->

(2) `.number`：转为数字类型

<input v-model.number="age" type="number"> <!-- 输入 "25" → age 为 25（数字类型） -->

(3) `.trim`：去除首尾空格

<input v-model.trim="username"> <!-- 输入 "  Alice " → username 为 "Alice" -->

三、注意事项

自定义组件必须触发事件：
子组件中需显式触发 update:modelValue 事件（或其他自定义事件），否则数据无法同步。
避免直接修改 Props：
在子组件中应通过事件修改数据，而非直接修改 modelValue。
复杂数据类型处理：
如果绑定的数据是对象或数组，需确保父子组件间通过引用同步（或使用深拷贝）。

四、总结

场景	语法	示例
原生表单元素	`v-model="data"`	`<input v-model="message">`
自定义组件（单个绑定）	`v-model="data"`	`<CustomInput v-model="message">`
自定义组件（多个绑定）	`v-model:propName="data"`	`<CustomForm v-model:title="title">`
使用修饰符	`v-model.modifier="data"`	`<input v-model.trim="username">`