当前位置：首页 > VUE

vue实现change事件

2026-01-17 02:49:38VUE

Vue 实现 change 事件的方法

在 Vue 中，可以通过多种方式监听和处理 change 事件，以下是常见的实现方法：

使用 v-on 或 @ 语法监听 change 事件

<template>
  <input type="text" @change="handleChange" />
</template>

<script>
export default {
  methods: {
    handleChange(event) {
      console.log('值变化了:', event.target.value);
    }
  }
}
</script>

结合 v-model 和 watch 监听变化

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

<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  },
  watch: {
    inputValue(newVal, oldVal) {
      console.log('值从', oldVal, '变为', newVal);
    }
  }
}
</script>

自定义组件中触发 change 事件

在自定义组件中，可以通过 $emit 触发 change 事件：

<template>
  <input 
    type="text" 
    :value="value" 
    @input="$emit('input', $event.target.value)"
    @change="$emit('change', $event.target.value)"
  />
</template>

<script>
export default {
  props: ['value']
}
</script>

使用 .lazy 修饰符延迟 change 触发

对于 v-model，默认在 input 事件触发更新，使用 .lazy 可以改为在 change 事件触发：

<template>
  <input type="text" v-model.lazy="lazyValue" />
</template>

<script>
export default {
  data() {
    return {
      lazyValue: ''
    }
  },
  watch: {
    lazyValue(newVal) {
      console.log('延迟变化:', newVal);
    }
  }
}
</script>

针对 select 元素的 change 事件

vue实现change事件

<template>
  <select v-model="selectedOption" @change="handleSelectChange">
    <option value="1">选项1</option>
    <option value="2">选项2</option>
  </select>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: ''
    }
  },
  methods: {
    handleSelectChange(event) {
      console.log('选择变化:', this.selectedOption);
    }
  }
}
</script>

这些方法可以根据具体需求选择使用，v-on:change 直接监听原生 change 事件，而 v-model + watch 或 .lazy 修饰符提供了更灵活的响应方式。

标签: 事件 vue

分享给朋友：

vue实现购物按钮

Vue 购物按钮实现方法基础按钮实现使用 Vue 的模板语法创建基础按钮组件，绑定点击事件处理购物逻辑： <template> <button @click="addToC…

vue实现滑块

Vue 实现滑块组件的方法使用原生 HTML 和 Vue 指令通过 Vue 的 v-model 和事件监听实现基础滑块功能。创建一个包含 input 元素的组件，类型设置为 range，并绑定到…

vue实现popup

Vue 实现 Popup 弹窗使用 Vue 原生组件创建一个基本的 Vue 组件作为弹窗，通过 v-if 或 v-show 控制显示隐藏。 <template> <div&…

vue实现模糊

Vue实现模糊搜索的方法在Vue中实现模糊搜索功能通常需要结合输入框和列表渲染，通过监听输入内容动态过滤数据。以下是几种常见实现方式：使用计算属性实现计算属性适合处理需要响应式更新的搜索逻辑：…

vue实现gridlayout

Vue 实现 Grid Layout 使用 CSS Grid 布局 CSS Grid 是一种强大的布局系统，可以直接在 Vue 组件的样式中使用。通过定义网格容器和网格项，可以快速实现复杂的布局结构。…

vue实现监控

Vue 实现监控功能的方法在 Vue 中实现监控功能通常涉及数据变化监听、事件监听或第三方监控工具集成。以下是几种常见实现方式：使用 Vue 的 watch 监听数据变化通过 watch 可以…

vue实现change事件