在 Vue 3 中,v-model
是一个常用的双向数据绑定指令,它在 Vue 2 的基础上进行了扩展,允许在一个组件中使用多个 v-model
,并且可以自定义绑定的属性名称。以下是一些关于 v-model
的用法和示例:
1. 基本用法
<template>
<input v-model="message" placeholder="Enter a message" />
<p>Your message: {{ message }}</p>
</template>
<script setup>
import { ref } from 'vue';
const message = ref('');
</script>
- 解释:
v-model="message"
实现了输入框的双向绑定。当用户在输入框中输入内容时,message
的值会自动更新,同时message
发生变化时,输入框的内容也会更新。
2. 在自定义组件中使用 v-model
在 Vue 3 中,自定义组件中可以使用 v-model
,而且可以绑定到不同的属性上。
<template>
<CustomInput v-model="text" />
<p>Text: {{ text }}</p>
</template>
<script setup>
import { ref } from 'vue';
import CustomInput from './CustomInput.vue';
const text = ref('');
</script>
CustomInput.vue
:
<template>
<input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />
</template>
<script setup>
import { defineProps, defineEmits } from 'vue';
const props = defineProps({
modelValue: String
});
const emit = defineEmits(['update:modelValue']);
</script>
- 解释:
CustomInput
组件中,使用了modelValue
作为v-model
的绑定属性,并通过update:modelValue
事件将输入框的变化通知父组件。- 父组件中,
v-model="text"
将text
与CustomInput
组件中的modelValue
属性绑定在一起,实现了双向数据绑定。
3. 多个 v-model
Vue 3 允许在一个组件上使用多个 v-model
,你可以自定义绑定的属性名称。
<template>
<CustomInput v-model:title="title" v-model:content="content" />
<p>Title: {{ title }}</p>
<p>Content: {{ content }}</p>
</template>
<script setup>
import { ref } from 'vue';
import CustomInput from './CustomInput.vue';
const title = ref('');
const content = ref('');
</script>
CustomInput.vue
:
<template>
<div>
<input :value="title" @input="$emit('update:title', $event.target.value)" placeholder="Enter title" />
<textarea :value="content" @input="$emit('update:content', $event.target.value)" placeholder="Enter content"></textarea>
</div>
</template>
<script setup>
import { defineProps, defineEmits } from 'vue';
const props = defineProps({
title: String,
content: String
});
const emit = defineEmits(['update:title', 'update:content']);
</script>
- 解释:
- 在
CustomInput
组件中,title
和content
分别绑定到了不同的输入元素上,并通过update:title
和update:content
事件来通知父组件。 - 父组件可以通过多个
v-model
将不同的属性进行双向绑定。
- 在
4. v-model
的修饰符
Vue 3 的 v-model
支持以下修饰符:
.lazy
: 绑定事件从input
改为change
,即在输入框失去焦点或按下回车时更新数据。.number
: 自动将输入内容转换为数字类型。.trim
: 自动移除输入内容的首尾空格。
<template>
<input v-model.lazy="text" placeholder="Enter text" />
<input v-model.number="age" placeholder="Enter your age" />
<input v-model.trim="name" placeholder="Enter your name" />
</template>
<script setup>
import { ref } from 'vue';
const text = ref('');
const age = ref(0);
const name = ref('');
</script>
- 解释:
v-model.lazy="text"
只有在input
失去焦点或按下回车时才会更新text
。v-model.number="age"
会自动将输入的字符串转换为数字类型并更新age
。v-model.trim="name"
会自动移除输入字符串的首尾空格。
总结
v-model
在 Vue 3 中变得更加灵活和强大,支持多属性绑定和修饰符,能够应对各种复杂的双向数据绑定需求。