vue3的双向数据绑定

在 Vue3 中，双向数据绑定可以通过 `v-model` 指令来实现。下面是一个简单的例子：

<template>
  <div>
    <label for="input">输入：</label>
    <input type="text" id="input" v-model="message">
    <p>输出：{{ message }}</p>
  </div>
</template>

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

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

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

上面的例子中，我们使用了 `ref` 函数来创建一个响应式的变量 `message`，然后在模板中使用 `v-model` 指令将输入框和 `message` 双向绑定起来。当用户输入内容时，`message` 的值也会随之更新，而当 `message` 的值发生改变时，模板中相应的数据也会更新。

需要注意的是，在 Vue3 中，双向数据绑定使用的是 `modelValue` 和 `update:modelValue`。如果你想自定义 `v-model` 的行为，可以使用这两个属性来实现。