vue3 语法糖 v-model

在 Vue 3 中，`v-model` 指令的使用方式有所改变，不再是像 Vue 2 中那样直接使用 `v-model`。Vue 3 中提供了一个新的语法糖 `v-model`，让双向绑定更加简洁。

在 Vue 3 中，你可以使用 `v-model` 语法糖来绑定一个值和一个事件。它实际上是将值绑定到 `value` 属性，并将 `input` 事件绑定到一个名为 `onUpdate:modelValue` 的事件。这个事件在输入框的值发生变化时被触发，从而更新绑定的值。

下面是一个简单的例子来演示如何使用 `v-model` 语法糖：

<template>
  <div>
    <input v-model="message">
    <p>Message: {{ message }}</p>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const message = ref('');

    return {
      message,
    };
  },
};
</script>

在上面的例子中，我们创建了一个 `message` 变量，并将其绑定到输入框上。每当输入框的值发生变化时，`message` 的值也会更新，并且在页面上显示出来。

注意，在 Vue 3 中，你需要使用 `ref` 函数来创建响应式的数据。这是因为 Vue 3 的响应式系统进行了一些改进。

希望这个例子能够帮助你理解 Vue 3 中 `v-model` 的使用方式。如果还有其他问题，请随时提问。