vue3 双向绑定 请给出示例

在 Vue3 中，使用 v-model 指令来实现双向绑定，示例代码如下：

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

<script>
import { ref } from 'vue'

export default {
  setup() {
    const message = ref('Hello, Vue3!')

    return {
      message
    }
  }
}
</script>

在上面的示例中，我们使用 ref 创建了一个响应式数据 message，然后将其绑定到输入框的 v-model 上，这样当用户输入内容时，message 的值也会被更新，而当 message 的值发生改变时，输入框的内容也会被更新。最后，我们在页面上使用 {{ message }} 显示 message 的值。这样就实现了双向绑定。