vue下的checkbox控制(全选,反选,及统计选中个数)
时间: 2024-03-02 15:48:40 浏览: 54
vue实现全选、反选功能
5星 · 资源好评率100%
在 Vue 中,可以使用 v-model 指令绑定一个布尔值来控制 checkbox 的选中状态。通过绑定一个数组来实现多选,然后通过计算属性来统计选中个数。
下面是一个简单的示例代码:
```html
<template>
<div>
<input type="checkbox" v-model="allChecked" @change="checkAll">
全选
<br>
<input type="checkbox" v-model="checkedList" v-bind:value="1">
选项1
<br>
<input type="checkbox" v-model="checkedList" v-bind:value="2">
选项2
<br>
<input type="checkbox" v-model="checkedList" v-bind:value="3">
选项3
<br>
已选中 {{ checkedCount }} 个
</div>
</template>
<script>
export default {
data() {
return {
allChecked: false,
checkedList: []
}
},
computed: {
checkedCount() {
return this.checkedList.length
}
},
methods: {
checkAll(event) {
this.checkedList = event.target.checked ? [1, 2, 3] : []
}
}
}
</script>
```
在上面的示例中,我们使用了一个 data 对象来保存全选状态和已选中的选项列表。然后通过 v-model 指令来绑定全选状态和选项列表。在计算属性中,我们使用选项列表的长度来计算已选中的个数。最后,在 checkAll 方法中,我们根据全选状态来更新选项列表。
阅读全文