vue3 Input 双向绑定

在 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('');

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

在上面的代码中，我们使用了 `v-model` 指令将 input 元素的值绑定到了 `message` 变量上，同时在页面上展示了 `message` 变量的值。

在 `setup` 函数中，我们使用了 `ref` 方法来创建了一个响应式变量 `message`，并将其返回。这样就可以在组件中使用 `message` 变量，并且当 `message` 变量的值改变时，页面上展示的值也会跟着改变。

需要注意的是，Vue3 中的 `v-model` 指令实际上是语法糖，它会自动展开为一个 `v-bind` 指令和一个 `v-on` 指令，因此我们也可以使用 `v-bind:value` 和 `v-on:input` 指令来实现双向绑定。例如：

<template>
  <div>
    <input :value="message" @input="message = $event.target.value" />
    <p>{{ message }}</p>
  </div>
</template>

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

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

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

在上面的代码中，我们使用了 `v-bind:value` 指令将 input 元素的值绑定到了 `message` 变量上，同时使用了 `v-on:input` 指令监听 input 元素的输入事件，并在事件处理函数中将输入的值赋值给 `message` 变量。这样也可以实现双向绑定。