vue实现有一个数组前面有input选中之后求对应的和,取消input按钮后求剩下选中值的和
时间: 2023-12-03 15:42:21 浏览: 40
可以通过监听input的change事件,然后根据选中状态来修改数组元素的值,在计算数组元素的和。具体实现可以参考下面的代码:
```html
<template>
<div>
<div>
<input type="checkbox" v-model="selectAll">全选/取消全选
</div>
<div v-for="(item, index) in list" :key="index">
<input type="checkbox" v-model="item.checked" @change="handleChange">
{{ item.value }}
</div>
<div>
<p>已选中的值的和:{{ sum }}</p>
</div>
</div>
</template>
<script>
export default {
data() {
return {
selectAll: false,
list: [
{ value: 1, checked: false },
{ value: 2, checked: false },
{ value: 3, checked: false },
{ value: 4, checked: false },
{ value: 5, checked: false },
],
};
},
computed: {
sum() {
return this.list
.filter((item) => item.checked)
.reduce((acc, cur) => acc + cur.value, 0);
},
},
methods: {
handleChange() {
if (this.selectAll) {
this.list.forEach((item) => (item.checked = true));
}
},
},
watch: {
selectAll(val) {
this.list.forEach((item) => (item.checked = val));
},
},
};
</script>
```
这里通过`v-model`指令绑定每个复选框的选中状态到对应的数组元素的`checked`属性上。然后在计算已选中的值的和时,只需要过滤出选中的元素,然后使用`reduce`方法求和即可。取消全选时,需要将所有元素的`checked`属性设置为`false`,然后在`handleChange`方法中监听复选框的`change`事件,在全选状态下选中某个元素时,需要将所有元素的`checked`属性设置为`true`。