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