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

vue使用List.reduce实现统计

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

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

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

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

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

3.复杂使用场景:

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

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

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

http://www.lryc.cn/news/486242.html

相关文章:

  • Linux网络:HTTPS协议
  • http常⻅请求头和响应头详细讲解(笔记)
  • 【c++丨STL】list的使用
  • 系统掌握大语言模型提示词 - 从理论到实践
  • cocosCreator视频web模式播放踩坑解决
  • c++头文件中 #ifndef的作用
  • Xcode 项目内 OC 混编 Python,调用 Python 函数,并获取返回值(基于 python 的 c函数库)
  • 每日计划-1117
  • 如何用GPT-4o解读视频
  • [ACTF2020]Upload 1--详细解析
  • 【微软:多模态基础模型】(3)视觉生成
  • 整合Druid
  • 基于Python空气质量可视化及预测
  • 第1章-PostgreSQL(PG)介绍
  • moduo之阻塞队列BlockingQueue和BoundedBlockingQueue
  • 大模型Tuning方法详解
  • 爬虫策略与反爬机制——爬虫常见策略
  • Linux基础(十七)——Linux 帐号管理与 ACL 权限设置
  • 【HarmonyOS】鸿蒙系统在租房项目中的项目实战(二)
  • 11.16 Vue element
  • Gin 框架中的路由
  • 在MATLAB中实现自适应滤波算法
  • linux文件与重定向
  • 基于Python的仓库管理系统设计与实现
  • 【Pikachu】URL重定向实战
  • C语言实现3D动态爱心图形的绘制与动画效果
  • 深入理解Nginx:从基础配置到高级优化
  • ONLYOFFICE8.2版本测评,团队协作的办公软件
  • spring 和 grpc 的整合
  • 企业项目级IDEA设置类注释、方法注释模板(仅增加@author和@date)