vue3实现双向数据绑定

在 Vue 3 中，双向数据绑定可以通过使用 `v-model` 指令来实现。下面是一个简单的示例，演示了如何在 Vue 3 中实现双向数据绑定：

<template>
  <div>
    <input v-model="message" type="text">
    <p>{{ message }}</p>
  </div>
</template>

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

在上述示例中，我们使用 `v-model` 指令将输入框与 `message` 数据进行绑定。当用户在输入框中输入文本时，`message` 数据会自动更新，并且当 `message` 数据发生变化时，输入框中的内容也会相应地更新。

需要注意的是，在 Vue 3 中，`v-model` 指令会默认将输入框的值作为 `value` 属性传递给组件，而不是像 Vue 2 中那样将其作为 `input` 事件的参数。这是因为 Vue 3 的组合式 API 更加灵活，可以更好地处理不同类型的表单输入。

希望这个简单的示例能帮助你理解在 Vue 3 中如何实现双向数据绑定。如果有任何疑问，请随时提问！