vue中reduce属性的使用@3@

news/2024/9/20 0:25:03/ 标签: vue.js, javascript, 前端
 1.reduce方法

​ reduce方法的使用(数组方法): 遍历数组,求和

​ 语法:数组名.reduce((pre,current) => {},参数2)

​ pre:上次执行该方法的返回值

​ current:数据项

​ 实例代码:

javascript">let shoppingCart = [{name: 'Vuejs入门', price: 99, count: 3},{name: 'Vuejs底层', price: 89, count: 1},{name: 'Vue从入门到放弃', price: 19, count: 5},
];let totalPrice = shoppingCart.reduce((total, item) => {console.log(total,item.price) // return total + item.price * item.count;
}, 0); // 初始值为0,表示从第一个元素开始累加console.log(totalPrice); // 输出总价:481// 第一个console.log打印的 0 99 297 89 386 19 // 第二个console.log打印的 输出总价:481
2.Vue的计算属性

存放属性(以函数的形式)

当一个值受其他值影响的时候,就会将这个值写在计算属性当中

有效缓存效果:只执行一次

在Vue模板中,你可以将这个计算属性绑定到一个数据属性上,以便在页面上显示:

javascript"><div id="app"><p>总价: {{ totalPrice }}</p>
</div><script>new Vue({el: '#app',{shoppingCart: [ /* ...购物车数据... */ ]},computed: {totalPrice() {return this.shoppingCart.reduce((total, item) => {return total + item.price * item.count;}, 0);}}});
</script>


http://www.ppmy.cn/news/1527807.html

相关文章

【新手/小白教程】打开一个vue项目的前置准备,nvm安装指定版本node

目录 一、前言二、nvmnvm介绍nvm下载与安装1. 官网下载 nvm 包2. 安装 nvm-setup.exe3. 配置路径和下载镜像4. 检查nvm是否安装完成5. 错误情况 三、nodenode版本查看node命令 一、前言 在换新电脑的时候总是需要把所有东西重新安装配置&#xff0c;这篇用来记录一下打开一个v…

Nginx 实现七层的负载均衡

一、拓扑结构 [vip: 20.20.20.20] 外网 桥接模式&#xff08;vip&#xff09; 内网 nat模式[LB1 Nginx] [LB2 Nginx]192.168.1.2 192.168.1.3[index] [milis] [videos] [images] [news]1.11 1.21 1.31 1.41 1.511.12 1.22 1.32 1.42 1.5…

【数据结构-一维差分】力扣1893. 检查是否区域内所有整数都被覆盖

给你一个二维整数数组 ranges 和两个整数 left 和 right 。每个 ranges[i] [starti, endi] 表示一个从 starti 到 endi 的 闭区间 。 如果闭区间 [left, right] 内每个整数都被 ranges 中 至少一个 区间覆盖&#xff0c;那么请你返回 true &#xff0c;否则返回 false 。 已…

4.铝箔缺陷检测项目复盘

硬件 1.装配的时候&#xff0c;在最初阶段就要考虑后面的走线&#xff0c;不能一团乱的塞进去完事&#xff0c;起码相同功能的线要用扎带处理一下。然后理顺好&#xff0c;要不后期理线是灾难。 2.有线标&#xff0c;线号&#xff0c;比如哪根线代表哪个相机&#xff0c;调试的…

CTFShow-信息搜集

Web1&#xff1a; ​ 题目描述&#xff1a;开发注释未及时删除 。 ​ 打开题目后提示web1:where is flag? ​ ctrlu读取源码。 Web2&#xff1a; ​ 题目描述&#xff1a;js前台拦截 无效操作 ​ 打开题目后显示&#xff1a;无法查看源代码 ​ 右键无法用&#xff0c;…

react 基础语法

前置知识 类的回顾 通过class关键字定义一个类 类名首字母大写 class类有constructor构造器 new 一个类得到一个实例 类还有方法&#xff0c;该方法也会在其原型上 static静态数据&#xff0c;访问静态属性通过 类名.id getter和setter getter&#xff1a;定义一个属性&…

继图书管理项目遗留的问题修改

1. 查询查不到&#xff1f; 因为我的数据库变量是下划线命名的&#xff0c;user_id &#xff0c;而一种规范是 &#xff0c;这个时候的实体类的变量要写成驼峰型的&#xff0c;就是userId。 第二种就是直接把数据库变量和实体类变量的名字设成相同的。 这样封装成的对象才能…

Vue 常用高级指令解析

Vue 高级指令的重要性 Vue 高级指令是一种扩展 Vue.js 框架的功能的方式&#xff0c;可以让你在处理 DOM 元素时具有更多的控制权。它们可以通过自定义指令的方式进行编写和应用。 高级指令的重要性在于&#xff0c;它们使开发者能够通过 Vue 框架来创建更加复杂和灵活的交互…

【Vmware16安装教程】

&#x1f4d6;Vmware16安装教程 ✅1.下载✅2.安装 ✅1.下载 官网地址&#xff1a;https://www.vmware.com/ 百度云盘&#xff1a;Vmware16下载 123云盘&#xff1a;Vmware16下载 ✅2.安装 1.双击安装包VMware-workstation-full-16.1.0-LinuxProbe.Com.exe&#xff0c;点击…

使用OpenCV进行模糊检测(拉普拉斯算子)

参考&#xff1a; 使用OpenCV进行模糊检测&#xff08;拉普拉斯算子&#xff09; 代码&#xff1a; # import the necessary packages from imutils import paths import argparse import cv2 import osdef variance_of_laplacian(image):# compute the Laplacian of the ima…

UE5安卓项目打包安装

Android studio安装 参考&#xff1a;https://docs.unrealengine.com/5.2/zh-CN/how-to-set-up-android-sdk-and-ndk-for-your-unreal-engine-development-environment/ 打开android studio的官网&#xff1a;Download Android Studio & App Tools - Android Developers …

【深度智能】:迈向高级时代的人工智能全景指南

​ ​ 前几天偶然发现了一个超棒的人工智能学习网站&#xff0c;内容通俗易懂&#xff0c;讲解风趣幽默&#xff0c;简直让人欲罢不能。忍不住分享给大家&#xff0c;人工智能立刻跳转&#xff0c;开启你的AI学习之旅吧&#xff01; 第一阶段&#xff1a;基础知识 1. 计算机科…

一个基于Java SSM框架(Spring、SpringMVC、MyBatis)的沙县小吃点餐系统

下面是一个基于Java SSM框架&#xff08;Spring、SpringMVC、MyBatis&#xff09;的沙县小吃点餐系统的简单代码案例。这个系统通常包含用户管理、菜单浏览、点餐、订单管理等功能。 1. 实体类&#xff08;POJO&#xff09; 首先&#xff0c;我们定义一个简单的Product实体类…

css grid布局属性详解

Grid布局 前言一、认识Grid1.1容器和项目1.2行和列1.3单元格和网格线 二、容器属性2.1.grid-template-columns与grid-template-rows属性2.1.1 直接使用长度单位比如px2.1.2 使用百分比 %2.1.3 使用repeat函数2.1.4 按比例划分 fr 关键字2.1.5 自动填充 auto 关键字2.1.6 最大值…

工商银行银企直联接口清单

+--- 电子银行部V0.0.0.1 | +--- 专业版 | | +--- 代发工资单上传(PBI).xls | | +--- 代发工资单删除(PBD).xls | | +--- 代发工资单查询(PBQ).xls | | +--- 余额保留(HAR).xls | | +--- 保证金账户信息查询(QAD).xls | | +--- 到账通知.xls | |…

2_foc闭环调试_ADC电流采样与滤波及pid数据结构

1、ADC电流采样 上次添加了编码器获取电角度的程序&#xff0c;将之前开环控制的角度进行了替换&#xff0c;这次再将电流采样添加进来&#xff0c;之后就可以利用这样一个有反馈的系统进行电流环PI控制器参数调试。 之前写过ADC&#xff0b;DMA电流采样的stm32库函数程序&…

MySQL索引知识个人笔记总结

本篇笔记是个人整理的索引知识总结&#xff0c;刚开始有点乱&#xff0c;后续会一直边学边整理边总结 索引&#xff08;index&#xff09;是帮助MySQL高效获取数据的数据结构(有序)。就好比索引就是数据的目录 索引结构 Btree索引,Hash索引,Full-text索引&#xff0c;R-tree(空…

[python]如何正确的安装pytorch?(详细)

一、我们为什么需要安装pytorch? pytorch作为目前最主流的开源机器学习库之一&#xff0c;凭借庞大的社区支持和易于开发的特性&#xff0c;收获了一大波开发者与项目分支。像我们熟知的“GLM”&#xff0c;“YOLO”,"GPT-Sovits"&#xff0c;“Stable Diffusion”.…

【Python篇】深度探索NumPy(下篇):从科学计算到机器学习的高效实战技巧

文章目录 Python NumPy学习指南前言第六部分&#xff1a;NumPy在科学计算中的应用1. 数值积分使用梯形规则进行数值积分使用Simpson规则进行数值积分 2. 求解微分方程通过Euler方法求解一阶常微分方程使用scipy.integrate.solve_ivp求解常微分方程 3. 随机过程模拟模拟布朗运动…

深入浅出Docker

1. Docker引擎 Docker引擎是用来运行和管理容器的核心软件。通常人们会简单的将其指代为Docker或Docker平台。 基于开放容器计划&#xff08;OCI&#xff09;相关的标准要求&#xff0c;Docker引擎采用了模块化的设计原则&#xff0c;其组件是可替换的。 Docker引擎由如下主…