当前位置: 首页 > article >正文

vue使用List.reduce实现统计

需要对集合的某些元素的值进行计算时,可以在计算属性中使用forEach方法

1.语法:集合.reduce   (  定义阶段性累加后的结果 , 定义遍历的每一项 ) => 定义每一项求和逻辑执行后的返回结果 , 定义起始值  )  

2、简单使用场景:例如下面直接加数量得总数结果可以通过reduce统计出来

代码:   myList.reduce  (  zong ,item   ) =>zong+item.num , 0   )  

data: {
    xxx
    xxx
},
computed:{
    furitCount(){
         myList.reduce( ( zong ,item ) =>zong+item.num,0)  
    }
}

3.复杂使用场景:

选择2个火龙果,再选中7个杨梅,未选中不加,总水果个数为9个 

下面这个总数也可以通过reduce统计出来,注意每一项都需要加上条件过滤,如果这一项是选中,就累加,把之前算的sum加上每一项的数量返,否则表示这一项未选中,不累加,把之前算的sum返回即可:

data: {
    xxx
    xxx
},
computed:{
    totalCount(){
        return this.fruitList.reduce((sum,item)=>{
              if(item.isChecked===true){//这一项是选中,就累加,把之前算的sum加上每一项的数量返回
                return sum+item.num
              }else{//这一项未选中,不累加,把之前算的sum返回即可
                return sum
              }
        },0);
    }
}


http://www.kler.cn/a/399181.html

相关文章:

  • 2024年了,TCP分析工具有哪些?
  • RabbitMQ的工作队列在Spring Boot中实现(详解常⽤的⼯作模式)
  • 场景营销在企业定制开发 AI 智能名片 S2B2C 商城小程序中的应用与价值
  • 搭建es环境
  • 云速搭助力用友 BIP 平台快速接入阿里云产品
  • GitLab 降级安装出现 500 错误,如何解决?
  • 前端开发设计模式——责任链模式
  • acwing算法基础03-递归,枚举
  • 【JavaScript】call、apply、bind
  • 数据结构中的抽象数据类型、逻辑结构、存储结构等到底是什么?
  • LeetCode 445.两数相加 II
  • 【不写for循环】玩玩行列
  • nfs服务器--RHCE
  • 论文学习(四) | 基于数据驱动的锂离子电池健康状态估计和剩余使用寿命预测
  • 后台运行docker compose项目,一直失败,提示:Timeout exceeded while awaiting headers?让我来看看~
  • idea 删除本地分支后,弹窗 delete tracked brank
  • 移门缓冲支架:减少噪音,提升生活质量
  • 【开源免费】基于SpringBoot+Vue.JS购物推荐网站(JAVA毕业设计)
  • Ubuntu22.04 安装mysql8 无法修改端口及配置的问题 坑啊~~~~
  • Uni-APP+Vue3+鸿蒙 开发菜鸟流程
  • Linux中配置ntp服务
  • 计算机编程中的设计模式及其在简化复杂系统设计中的应用
  • 【STM32】MPU6050简介
  • android webview常见内容
  • Unity安装后点击登录没反应
  • 抽象java入门1.5.3.1——类的进阶