<el-checkbox-group v-model="checkboxGroup" @change="checkboxChange">
时间: 2023-07-21 14:08:44 浏览: 204
这段代码是使用了Element UI库中的`<el-checkbox-group>`组件,`v-model`指令用于双向绑定多选框组的值,`@change`事件用于监听多选框组的值变化。
在Vue实例中,需要定义一个名为`checkboxGroup`的data属性来存储多选框组的值,并且定义一个名为`checkboxChange`的方法来处理值变化的逻辑。
```vue
<template>
<el-checkbox-group v-model="checkboxGroup" @change="checkboxChange">
<el-checkbox label="选项1"></el-checkbox>
<el-checkbox label="选项2"></el-checkbox>
<el-checkbox label="选项3"></el-checkbox>
</el-checkbox-group>
</template>
<script>
export default {
data() {
return {
checkboxGroup: []
}
},
methods: {
checkboxChange(value) {
console.log(value) // 多选框组的值变化时触发,打印新的值
}
}
}
</script>
```
在上面的代码中,当多选框组的值发生变化时,`checkboxChange`方法会被调用,并传入当前的值作为参数。你可以在该方法中进行自定义的处理逻辑,比如打印新的值或者更新其他相关的数据。
阅读全文