Vue中复选框的onchange事件

在Vue中，可以使用**v-model**指令来双向绑定表单元素和Vue实例中的数据，而复选框也是一种表单元素。

当复选框的选中状态发生改变时，会触发onchange事件，我们可以通过在复选框上绑定v-model指令来监听onchange事件。

代码示例

下面是一个简单的Vue示例，它使用了v-model指令来绑定复选框的选中状态。这个示例中有三个复选框，分别绑定了不同的数据。

<template>
  <div>
    <input type="checkbox" id="checkbox1" v-model="checked1" @change="handleChange">
    <label for="checkbox1">复选框1</label>
    <br>
    <input type="checkbox" id="checkbox2" v-model="checked2" @change="handleChange">
    <label for="checkbox2">复选框2</label>
    <br>
    <input type="checkbox" id="checkbox3" v-model="checked3" @change="handleChange">
    <label for="checkbox3">复选框3</label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checked1: false,
      checked2: false,
      checked3: false,
    };
  },
  methods: {
    handleChange() {
      console.log('复选框状态改变了！');
      console.log('checked1:', this.checked1);
      console.log('checked2:', this.checked2);
      console.log('checked3:', this.checked3);
    },
  },
};
</script>

在上面的示例中，我们在每个复选框上使用了v-model指令，使得复选框的选中状态和Vue实例中的数据双向绑定。同时，我们在每个复选框上绑定了@change事件，当复选框的选中状态发生改变时，就会触发这个事件。

在Vue实例中，我们定义了三个变量checked1、checked2和checked3，它们分别表示三个复选框的选中状态。当任何一个复选框的选中状态发生改变时，会触发handleChange方法。

在handleChange方法中，我们打印了一些信息，以便在控制台中查看复选框的选中状态。

总结

通过使用v-model指令和@change事件，我们可以很方便地监听复选框的选中状态发生改变的事件，并且更新Vue实例中的数据。