vue3+vite动态监听输入框的值并计数

你可以使用Vue 3中提供的`ref`和`watch`来实现动态监听输入框的值并计数。

首先，在你的Vue组件中，使用`ref`定义一个变量来存储输入框的值：

<template>
  <div>
    <input type="text" v-model="inputValue" />
    <p>输入框中的文字个数：{{ inputCount }}</p>
  </div>
</template>

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

export default {
  setup() {
    const inputValue = ref('');
    const inputCount = ref(0);

    watch(inputValue, (newVal) => {
      inputCount.value = newVal.length;
    });

    return {
      inputValue,
      inputCount,
    };
  },
};
</script>

在上述代码中，我们使用`ref`定义了两个变量`inputValue`和`inputCount`，分别用于存储输入框的值和输入框中文字的个数。然后，我们使用`watch`来监听`inputValue`的变化，当输入框的值发生变化时，会自动计算文字的个数并更新`inputCount`的值。

最后，在模板中展示`inputValue`和`inputCount`即可。

值得注意的是，由于我们使用了Vue 3的Composition API，因此在组件中使用`setup`函数来定义变量和监听器。如果你还没有使用过Composition API，可以先学习一下Vue 3的文档。