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.mzph.cn/bicheng/61144.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Ubuntu24.04安装和配置Redis7.4

Ubuntu24.04安装和配置Redis7.4 #切换到root用户 sudo su -#更新源 apt update apt upgrade#安装 lsb-release、curl 和 gpg ,以便能够添加 Redis 仓库 apt install lsb-release curl gpg#导入 Redis 的 GPG 密钥 curl -fsSL https://packages.redis.io/gpg | gpg …

【Linux】进程的优先级

进程的优先级 一.概念二.修改优先级的方法三.进程切换的大致原理:四.上下文数据的保存位置: 一.概念 cpu资源分配的先后顺序,就是指进程的优先权(priority)。 优先权高的进程有优先执行权利。配置进程优先权对多任务环…

ESLint 使用教程(七):ESLint还能校验JSON文件内容?

系列文章 ESLint 使用教程(一):从零配置 ESLint ESLint 使用教程(二):一步步教你编写 Eslint 自定义规则 ESLint 使用教程(三):12个ESLint 配置项功能与使用方式详解 ES…

【软件工程】一篇入门UML建模图(类图)

🌈 个人主页:十二月的猫-CSDN博客 🔥 系列专栏: 🏀软件开发必练内功_十二月的猫的博客-CSDN博客 💪🏻 十二月的寒冬阻挡不了春天的脚步,十二点的黑夜遮蔽不住黎明的曙光 目录 1. 前…

uniapp 跨域前端代理

manifest.json里找到H5,添加下面代码 请求封装里直接 url ‘/test’ 就可以 "devServer" : {"https" : false,"port" : 8080,"proxy" : {"/test" : {"target" : "http://192.168.5.20:8080&qu…

AWTK-WIDGET-WEB-VIEW 实现笔记 (3) - MacOS

MacOS 上实现 AWTK-WIDGET-WEB-VIEW 有点麻烦,主要原因是没有一个简单的办法将一个 WebView 嵌入到一个窗口中。所以,我们只能通过创建一个独立的窗口来实现。 1. 创建窗口 我对 Object-C 不熟悉,也不熟悉 Cocoa 框架,在 ChatGPT…

QT仿QQ聊天项目,第三节,实现聊天界面

一,界面控件示意图 界面主要由按钮QPushButton,标签QLabel,列表QListWidget 要注意的是QListWidget既是实现好友列表的控件,也是实现聊天气泡的控件 二,控件样式 QPushButton#btn_name {border:none;}QPushButton#btn_close {border:1px;bac…

微信小程序自定义顶部导航栏(适配各种机型)

效果图 1.pages.js,需要自定义导航栏的页面设置"navigationStyle": "custom" 2.App.vue,获取设备高度及胶囊位置 onLaunch: function () {// 系统信息const systemInfo uni.getSystemInfoSync()// 胶囊按钮位置信息const menuButtonInfo uni.…

7、硬盘品牌分类介绍:海力士 - 计算机硬件品牌系列文章

海力士,‌全称为SK海力士,‌是一家总部位于韩国的全球顶级半导体供应商,‌专注于动态随机存取存储器(‌DRAM)‌、‌NAND快闪存储器(‌NAND Flash)‌及CMOS图像传感器(‌CIS)‌等产品的研发、‌生产和销售。‌作为韩国第三大财阀SK集团旗下的子…

Android Studio开发学习(五)———LinearLayout(线性布局)

一、布局 认识了解一下Android中的布局,分别是: LinearLayout(线性布局),RelativeLayout(相对布局),TableLayout(表格布局), FrameLayout(帧布局),AbsoluteLayout(绝对布局),GridLayout(网格布局) 等。 二、…

C++:哈希拓展-位图

目录 一.问题导入 二.什么是位图? 2.1如何确定目标数在哪个比特位? 2.2如何存放高低位 2.3位图模拟代码实现 2.3.1如何标记一个数 2.3.2如何重置标记 2.3.3如何检查一个数是否被标记 整体代码实现 标准库的Bitset 库中的bitset的缺陷 简单应用 一.问题导入 这道…

[AI] 如何让计算机具备核心直觉知识:从常识推理到具身智能

随着人工智能(AI)技术的发展,如何让计算机具备核心的“直觉知识”成为重要的研究课题之一。十多年来,AI研究者们持续探索如何使机器不仅能处理大量数据,还能像人类一样理解和推理日常常识。认知科学家雷纳特提出,赋予机器常识将是推动AI进步的关键,因此他致力于建立一个…

C++中的 std::optional

std::optional<T>是 C17 中的一个标准库组件&#xff0c;optional <T>对象默认是空的&#xff0c;也就是处于无效状态&#xff0c;给它赋值后因为里面有了元素&#xff0c;就变成了有效状态。 1.引入背景 c函数常用返回值表示函数是否执行成功。如返回nullptr表示…

实用教程:如何无损修改MP4视频时长

如何在UltraEdit中搜索MP4文件中的“mvhd”关键字 引言 在视频编辑和分析领域&#xff0c;有时我们需要深入到视频文件的底层结构中去。UltraEdit&#xff08;UE&#xff09;和UEStudio作为强大的文本编辑器&#xff0c;允许我们以十六进制模式打开和搜索MP4文件。本文将指导…

Docker占用空间太大磁盘空间不足清理妙招

docker占用空间太大了&#xff0c;磁盘空间不足&#xff0c;清理3妙招 清除所有已停止的容器&#xff08;container&#xff09;、未被任何容器所使用的卷&#xff08;volume&#xff09;、未被任何容器所关联的网络&#xff08;network&#xff09;、所有悬空镜像&#xff08…

Spring Boot 接口防重复提交解决方案

文章目录 前言使用Token机制实现步骤1.生成Token2.传递Token3.验证Token 使用Redis实现步骤1.引入Redis依赖2.生成Token3.传递Token4.验证Token 使用Spring AOP实现步骤1.定义注解2.创建切面3.使用注解 总结 前言 在Web开发中&#xff0c;防止用户重复提交表单是一个常见的需求…

Linux性能优化之火焰图简介

Linux 火焰图&#xff08;Flame Graph&#xff09;是一种可视化工具&#xff0c;用于分析程序性能问题&#xff0c;尤其是 CPU 使用情况。它展示了程序中函数调用的层次结构和各个调用栈占用的时间比例。 以下是详细介绍&#xff0c;包括火焰图的工作原理、生成步骤和实际使用中…

笔记|M芯片MAC (arm64) docker上使用 export / import / commit 构建amd64镜像

很简单的起因&#xff0c;我的东西最终需要跑在amd64上&#xff0c;但是因为mac的架构师arm64&#xff0c;所以直接构建好的代码是没办法跨平台运行的。直接在arm64上pull下来的docker镜像也都是arm64架构。 检查镜像架构&#xff1a; docker inspect 8135f475e221 | grep Arc…

【JavaWeb】JavaWeb入门之XML详解

目录 1.XML介绍 1.1.XML概述 1.1.1.什么是XML 1.1.2.XML的作用 1.1.3.XML与HTML的比较 1.1.4.XML和properties&#xff08;属性文件&#xff09;比较 1.1.5.W3C组织 1.2.XML语法概述 1.2.1.XML文档展示 1.2.2.XML文档的组成部分 1.3.XML文档声明 1.3.1.什么是XML文…

spring源码02-spring容器启动(容器初始化+bean实例化)源码解读【常见面试题】

文章目录 【README】【1】spring容器初始化及bean实例化步骤列表【2】spring容器初始化源码【2.1】容器初始化主要步骤总结&#xff1a;【2.2】容器初始化详细步骤源码分析 【3】bean实例化源码【3.1】bean实例化主要步骤总结&#xff08;非常重要&#xff09;【3.1.1】 bean生…