vue下的@change事件的实现

当我们在Vue中要监听表单控件的值变化时，可以使用@change事件。在Vue中，可以通过v-model指令来实现数据的双向绑定。当表单的值发生变化时，v-model会自动更新数据，而@change事件则可以在表单的值发生变化时执行自定义逻辑。

下面是一个使用@change事件的示例代码：

<template>
  <div>
    <input type="text" v-model="message" @change="handleChange">
    <p>{{ message }}</p>
  </div>
</template>

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

在以上示例中，我们绑定了一个文本框和一个message变量，然后使用了v-model指令来实现双向绑定。同时，我们还为文本框添加了@change事件，在文本框的值发生变化时，handleChange方法会被执行，打印出当前输入框的值。

除了文本框，@change事件还可以应用于其他表单控件，比如单选框、多选框和下拉选择框。下面是一个多选框的示例代码：

<template>
  <div>
    <input type="checkbox" v-model="checkedList" value="apple" @change="handleChange">
    <input type="checkbox" v-model="checkedList" value="banana" @change="handleChange">
    <input type="checkbox" v-model="checkedList" value="pear" @change="handleChange">

    <p>你选择的水果有：{{ checkedList }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checkedList: []
    }
  },
  methods: {
    handleChange(event) {
      console.log(this.checkedList)
    }
  }
}
</script>

在以上示例中，我们绑定了三个多选框和一个checkedList变量，然后使用了v-model指令来实现双向绑定。同时，我们还为多选框添加了@change事件，在多选框的值发生变化时，handleChange方法会被执行，打印出当前选中的多选框的值。