vue3 中v-model

在 Vue 3 中，v-model 指令的使用稍有不同。在 Vue 2 中，v-model 主要用于双向数据绑定，但在 Vue 3 中，v-model 被认为是语法糖，它实际上是通过 v-bind 和 v-on 的组合来实现的。

在 Vue 3 中，你需要使用 v-model 指令来创建一个双向绑定的表单元素或组件。例如，你可以使用 v-model 来绑定一个输入框的值，并在数据发生变化时更新该值。可以通过如下方式使用：

<template>
  <input v-model="message" />
</template>

<script>
export default {
  data() {
    return {
      message: "",
    };
  },
};
</script>

在上面的示例中，message 是一个数据属性，它会与输入框的值进行双向绑定。当输入框的值发生变化时，message 的值也会更新；反之亦然。

需要注意的是，在 Vue 3 中，v-model 只能用于原生的表单元素（比如 `<input>`、`<textarea>`、`<select>` 等），如果要在自定义组件上使用 v-model，你需要在组件中使用 `modelValue` 和 `update:modelValue`。例如：

<template>
  <custom-input v-model="message" />
</template>

<script>
export default {
  data() {
    return {
      message: "",
    };
  },
};
</script>

在上述示例中，`<custom-input>` 是一个自定义组件，它内部需要使用 `modelValue` 来接收外部的值，并通过 `update:modelValue` 来更新外部的值。

希望这能解答你的问题！如果你还有其他问题，请随时提问。