vue下的checkbox控制(全选,反选,及统计选中个数)
时间: 2024-03-08 18:48:16 浏览: 21
在Vue中实现checkbox的全选、反选及统计选中个数,可以通过以下步骤实现:
1. 在data中定义一个数组selected,用来存储选中的checkbox的值。
```
data() {
return {
selected: []
}
}
```
2. 给全选的checkbox添加v-model,绑定到一个Boolean类型的变量allSelected上,当allSelected为true时,selected数组中添加所有可选项的值,当allSelected为false时,selected数组清空。
```
<input type="checkbox" v-model="allSelected"> 全选
```
```
computed: {
allChecked: {
get() {
return this.selected.length === this.options.length;
},
set(val) {
this.selected = val ? this.options.map(option => option.value) : [];
}
}
}
```
3. 给每个可选项的checkbox绑定v-model,当选中时,将该项的值添加到selected数组中。
```
<div v-for="option in options" :key="option.id">
<input type="checkbox" v-model="selected" :value="option.value">
<label>{{ option.label }}</label>
</div>
```
4. 实现反选功能,即将selected数组中的选中项变为未选中,未选中的变为选中。
```
reverseSelect() {
const newSelected = [];
this.options.forEach(option => {
if (!this.selected.includes(option.value)) {
newSelected.push(option.value);
}
});
this.selected = newSelected;
}
```
5. 统计选中的个数,即selected数组的长度。
```
computed: {
selectedCount() {
return this.selected.length;
}
}
```
完整代码如下:
```
<template>
<div>
<div>
<input type="checkbox" v-model="allChecked"> 全选
</div>
<div v-for="option in options" :key="option.id">
<input type="checkbox" v-model="selected" :value="option.value">
<label>{{ option.label }}</label>
</div>
<div>
<button @click="reverseSelect">反选</button>
<div>已选中{{ selectedCount }}项</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
options: [
{ id: 1, label: '选项1', value: 'option1' },
{ id: 2, label: '选项2', value: 'option2' },
{ id: 3, label: '选项3', value: 'option3' }
],
allChecked: false,
selected: []
}
},
computed: {
allSelected: {
get() {
return this.selected.length === this.options.length;
},
set(val) {
this.selected = val ? this.options.map(option => option.value) : [];
}
},
selectedCount() {
return this.selected.length;
}
},
methods: {
reverseSelect() {
const newSelected = [];
this.options.forEach(option => {
if (!this.selected.includes(option.value)) {
newSelected.push(option.value);
}
});
this.selected = newSelected;
}
}
}
</script>
```