Vue中的onchange事件

在Vue中，使用v-on指令绑定事件，当需要监听表单元素的数值变化时，就需要使用v-on:change或@change来注册onchange事件。

使用方法

<template>
  <div>
    <input type="text" v-model="inputValue" @change="handleChange">
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  },
  methods: {
    handleChange(event) {
      console.log(event.target.value)
    }
  }
}
</script>

当input的文本值变化时，handleChange方法会打印出变化后的值。

注意事项

• v-model指令绑定了输入框的值，可以直接在data对象中使用该值。
• 在@change事件回调函数中，可以通过event.target.value获取到输入框的值。
• 如果需要向handleChange方法传递其它参数，可以使用$event占位符。

<template>
  <div>
    <input type="text" v-model="inputValue" @change="handleChange($event, arg1, arg2)">
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  },
  methods: {
    handleChange(event, arg1, arg2) {
      console.log(event.target.value, arg1, arg2)
    }
  }
}
</script>

结语

onchange事件是表单元素中非常常用的一个事件，可以在Vue中使用v-on:change或@change来绑定onchange事件。同时，在Vue的事件处理中，也可以传递其它参数，非常灵活。