使用 $refs 来访问输入框并监听其 input 事件

在Vue.js中，`$refs`是一个特殊的功能，允许你在模板中引用元素，并通过它们的引用在JavaScript上下文中获取到该元素的实际DOM节点。当需要访问像input这样的表单控件时，你可以这样做：

<template>
  <div>
    <input ref="myInput" v-model="message" @input="handleInput" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '',
    };
  },
  methods: {
    handleInput(e) {
      // 这里 e 是 input 事件触发的事件对象
      console.log('Value changed:', e.target.value); // 获取输入框的当前值
      this.someFunction(e.target.value); // 调用处理函数，传入输入内容
    },
    someFunction(value) {
      // ... 对 value 的操作
    },
  },
};
</script>

在这个例子中，我们首先在模板中给input元素添加了`ref="myInput"`，然后在`handleInput`方法中通过`this.$refs.myInput`获取到了这个input元素。每次用户在input框中输入，`@input`事件会被触发，`handleInput`就会被执行，我们可以直接对`e.target.value`进行处理。