首页vue实现有一个数组前面有input选中之后求对应的和，取消input按钮后求剩下选中值的和

vue实现有一个数组前面有input选中之后求对应的和，取消input按钮后求剩下选中值的和

时间: 2023-12-03 22:42:21 浏览: 76

可以通过监听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`。

阅读全文