vue3的v-model

在 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 中变得更加灵活和强大，支持多属性绑定和修饰符，能够应对各种复杂的双向数据绑定需求。