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

【vue-5】Vue 3 中的 v-model：双向数据绑定的全面指南

news 2025/7/20 6:00:41

在 Vue 开发中，v-model 是实现表单输入和应用状态之间双向绑定的关键指令。Vue 3 对 v-model 进行了重大改进，使其更加灵活和强大。本文将深入探讨 Vue 3 中 v-model 的工作原理、新特性以及最佳实践。

1. v-model 基础

1.1 什么是 v-model

v-model 是 Vue 提供的一个语法糖，它本质上结合了 v-bind 和 v-on：

<input v-model="message">

等价于：

<input :value="message"@input="message = $event.target.value"
>

1.2 基本用法

在表单元素上使用 v-model 非常简单：

<template><input v-model="text" placeholder="请输入"><p>你输入的内容是: {{ text }}</p>
</template><script setup>
import { ref } from 'vue'const text = ref('')
</script>

2. Vue 3 中的 v-model 改进

2.1 多个 v-model 绑定

Vue 3 允许在单个组件上使用多个 v-model：

<UserNamev-model:first-name="firstName"v-model:last-name="lastName"
/>

子组件实现：

<script setup>
defineProps({firstName: String,lastName: String
})defineEmits(['update:firstName', 'update:lastName'])
</script><template><input:value="firstName"@input="$emit('update:firstName', $event.target.value)"/><input:value="lastName"@input="$emit('update:lastName', $event.target.value)"/>
</template>

2.2 v-model 修饰符

Vue 3 支持自定义 v-model 修饰符。例如，创建一个 capitalize 修饰符：

<MyComponent v-model.capitalize="myText" />

子组件处理：

<script setup>
const props = defineProps({modelValue: String,modelModifiers: { default: () => ({}) }
})const emit = defineEmits(['update:modelValue'])function emitValue(e) {let value = e.target.valueif (props.modelModifiers.capitalize) {value = value.charAt(0).toUpperCase() + value.slice(1)}emit('update:modelValue', value)
}
</script><template><input :value="modelValue" @input="emitValue" />
</template>

3. 不同表单元素的使用

3.1 文本输入

<input v-model="text" type="text">

3.2 多行文本

<textarea v-model="message"></textarea>

3.3 复选框

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

<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>

多个复选框绑定到数组：

<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">

3.4 单选按钮

<input type="radio" id="one" value="One" v-model="picked">
<input type="radio" id="two" value="Two" v-model="picked">

3.5 选择框

单选：

<select v-model="selected"><option disabled value="">请选择</option><option>A</option><option>B</option><option>C</option>
</select>

多选（绑定到数组）：

<select v-model="selected" multiple><option>A</option><option>B</option><option>C</option>
</select>

4. v-model 修饰符

Vue 提供了一些内置修饰符来修改 v-model 的行为：

4.1 .lazy

将 input 事件改为 change 事件：

<input v-model.lazy="msg">

4.2 .number

自动将用户输入转为数字：

<input v-model.number="age" type="number">

4.3 .trim

自动去除用户输入的首尾空白：

<input v-model.trim="msg">

5. 在组件中使用 v-model

5.1 基本实现

子组件：

<script setup>
defineProps(['modelValue'])
defineEmits(['update:modelValue'])
</script><template><input:value="modelValue"@input="$emit('update:modelValue', $event.target.value)"/>
</template>

父组件：

<CustomInput v-model="searchText" />

5.2 带参数的 v-model

子组件：

<script setup>
defineProps(['title'])
defineEmits(['update:title'])
</script><template><inputtype="text":value="title"@input="$emit('update:title', $event.target.value)"/>
</template>

父组件：

<MyComponent v-model:title="bookTitle" />

6. 高级技巧

6.1 自定义输入组件

创建一个带验证的输入组件：

<!-- ValidatedInput.vue -->
<script setup>
import { computed } from 'vue'const props = defineProps({modelValue: String,required: Boolean,minLength: Number
})const emit = defineEmits(['update:modelValue'])const error = computed(() => {if (props.required && !props.modelValue) {return '此字段为必填项'}if (props.minLength && props.modelValue?.length < props.minLength) {return `至少需要 ${props.minLength} 个字符`}return null
})function handleInput(e) {emit('update:modelValue', e.target.value)
}
</script><template><input :value="modelValue" @input="handleInput" /><div v-if="error" class="error">{{ error }}</div>
</template>

使用：

<ValidatedInput v-model="username" :required="true" :minLength="5"
/>

6.2 组合式 API 中的 v-model

使用 computed 实现更复杂的逻辑：

<script setup>
import { computed } from 'vue'const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])const value = computed({get() {return props.modelValue},set(value) {emit('update:modelValue', value)}
})
</script>