当前位置：首页 > VUE

vue实现监听input变化

2026-02-24 03:01:28VUE

Vue 监听 input 变化的方法

在 Vue 中监听 input 元素的变化可以通过多种方式实现，以下是几种常见的方法：

使用 `v-model` 和 `watch`

v-model 是 Vue 提供的双向数据绑定指令，结合 watch 可以监听数据变化。

<template>
  <input v-model="inputValue" />
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  },
  watch: {
    inputValue(newVal, oldVal) {
      console.log('Input changed from', oldVal, 'to', newVal);
    }
  }
}
</script>

使用 `v-on:input` 事件

直接监听 input 事件，可以在事件触发时执行自定义逻辑。

<template>
  <input :value="inputValue" @input="handleInput" />
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  },
  methods: {
    handleInput(event) {
      this.inputValue = event.target.value;
      console.log('Input value:', this.inputValue);
    }
  }
}
</script>

使用 `v-model` 和自定义修饰符

Vue 允许通过 .lazy 修饰符将 input 事件改为 change 事件（失去焦点时触发）。

<template>
  <input v-model.lazy="inputValue" />
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  },
  watch: {
    inputValue(newVal) {
      console.log('Input value changed (lazy):', newVal);
    }
  }
}
</script>

使用 `debounce` 或 `throttle` 优化频繁输入

对于高频输入场景，可以通过 debounce 或 throttle 减少事件触发频率。

vue实现监听input变化

<template>
  <input :value="inputValue" @input="debouncedInput" />
</template>

<script>
import { debounce } from 'lodash';

export default {
  data() {
    return {
      inputValue: ''
    }
  },
  created() {
    this.debouncedInput = debounce(this.handleInput, 500);
  },
  methods: {
    handleInput(event) {
      this.inputValue = event.target.value;
      console.log('Debounced input:', this.inputValue);
    }
  },
  beforeDestroy() {
    this.debouncedInput.cancel();
  }
}
</script>