vue计算对象数组中a属性相同时,计算b属性之和并放到c属性上
时间: 2024-06-19 10:04:10 浏览: 11
在Vue中,可以通过计算属性来实现对对象数组的计算,具体实现方式如下:
1. 首先在data中定义一个包含多个对象的数组,每个对象中包含a和b两个属性,并且添加一个新的属性c用于存储计算结果:
```
data() {
return {
items: [
{ a: 1, b: 10, c: 0 },
{ a: 2, b: 20, c: 0 },
{ a: 1, b: 30, c: 0 },
{ a: 3, b: 40, c: 0 }
]
}
}
```
2. 然后在计算属性中使用reduce方法对数组进行遍历和计算,将a属性相同的项的b属性相加并赋值给c属性:
```
computed: {
computedItems() {
const map = {}
return this.items.map(item => {
if (map[item.a]) {
map[item.a].b += item.b
return Object.assign({}, item, { c: map[item.a].b })
} else {
map[item.a] = item
return Object.assign({}, item)
}
})
}
}
```
3. 最后在模板中使用v-for指令渲染计算后的结果:
```
<ul>
<li v-for="(item, index) in computedItems" :key="index">{{ item.a }} - {{ item.b }} - {{ item.c }}</li>
</ul>
```
这样就可以根据a属性相同的项,计算b属性之和并放到c属性上了。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)