vue中reduce属性的使用@3@

news/2024/11/13 7:53:23/
 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 框架来创建更加复杂和灵活的交互…