当前位置：首页 > 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 监听变化

vue实现change事件

<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 事件：

vue实现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 事件

<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 实现屏幕共享的方法使用 WebRTC 和 getDisplayMedia API 通过 navigator.mediaDevices.getDisplayMedia 捕获屏幕内容，结合 We…

vue实现store

Vue 实现 Store 在 Vue 中，可以通过 Vuex 或 Pinia 实现全局状态管理（Store）。以下是两种主流方案的实现方法。使用 Vuex 实现 Store Vuex 是 Vue…

vue实现高亮

Vue 实现文本高亮的方法在 Vue 中实现文本高亮可以通过多种方式完成，以下是几种常见的方法：方法一：使用 v-html 指令通过 v-html 指令可以动态插入 HTML 内容，将需要高…

vue实现tag

Vue 实现标签（Tag）功能在 Vue 中实现标签（Tag）功能可以通过多种方式完成，以下是一些常见的方法和实现步骤：使用动态组件和 v-for 通过 v-for 指令动态渲染标签列表，结合样…

vue实现详情

Vue 实现详情页的常见方法使用动态路由在 Vue Router 中配置动态路由参数，通过 $route.params 获取详情 ID。示例路由配置： { path: '/detail/:i…

vue实现签章

Vue 实现签章功能签章功能通常包括手写签名、电子印章等。以下是基于 Vue 的实现方法：使用 canvas 实现手写签名安装依赖（如需要）： npm install signatu…

vue实现change事件