vue3 input内容改变

在 Vue 3 中，你可以使用 `v-model` 指令来绑定表单元素的值，并且使用 `@input` 事件监听输入框内容的变化。

例如，如果你想实时监听一个文本输入框的值变化，可以这样写：

<template>
  <div>
    <input type="text" v-model="inputValue" @input="handleInput" />
  </div>
</template>

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

export default defineComponent({
  setup() {
    let inputValue = '';

    const handleInput = (event) => {
      inputValue = event.target.value;
      console.log(inputValue); // 打印输入框的值
    }

    return {
      inputValue,
      handleInput,
    };
  },
});
</script>

在这个例子中，我们使用 `v-model` 指令将输入框的值与 `inputValue` 变量双向绑定，然后使用 `@input` 事件监听输入框内容的变化，并在 `handleInput` 方法中更新 `inputValue` 变量的值，并打印输入框的值。

这样，每当用户输入或删除一个字符时，`handleInput` 方法就会被调用，从而实现了实时监听输入框内容的变化。