vu实现有一个数组前面有input选中之后求对应的和,取消之后去掉取消的值
时间: 2023-12-03 16:42:19 浏览: 41
假设你有一个数组 `arr` 和一个 input 元素 `input`,你可以使用以下的 Vue 代码来实现所述的功能:
```html
<template>
<div>
<input type="checkbox" v-model="isChecked">选中</input>
<select v-model="selectedValue">
<option v-for="item in arr" :value="item">{{ item }}</option>
</select>
<p>当前选中的值为:{{ selectedValue }}</p>
<p>数组中所有选中值的和为:{{ sum }}</p>
</div>
</template>
<script>
export default {
data() {
return {
arr: [1, 2, 3, 4, 5],
selectedValue: null,
isChecked: false
}
},
computed: {
sum() {
let sum = 0
for (let i = 0; i < this.arr.length; i++) {
if (this.selectedValue === this.arr[i] && this.isChecked) {
sum += this.arr[i]
}
}
return sum
}
},
watch: {
isChecked(val) {
if (!val) {
// 如果取消选中,则将选中的值从数组中删除
const index = this.arr.indexOf(this.selectedValue)
if (index !== -1) {
this.arr.splice(index, 1)
}
this.selectedValue = null
}
}
}
}
</script>
```
在上面的代码中,我们使用了一个 `selectedValue` 变量来存储用户当前选中的值,并且使用一个 `isChecked` 变量来表示用户是否选中了该元素。当用户选中一个值时,我们会计算数组中所有选中值的和,并将结果显示在页面上。如果用户取消选中该元素,则会将该元素从数组中删除,并将 `selectedValue` 设置为 null,以便重新选择其他值。