Vue计算属性中reduce方法实现遍历方式
更新时间：2023年03月29日 10:30:05 作者：宏辉
这篇文章主要介绍了Vue计算属性中reduce方法实现遍历方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue计算属性reduce方法实现遍历
在前端页面中要实现一个商品购物车的遍历来计算出总价格，很多小伙伴都会想到用循环，可是这样编写的代码语句过于臃肿
下面我们来学习一下reduce方法实现遍历计算出商品总价格
未登录购物车：选中商品
在页面中，每个购物车商品左侧，都有一个复选框，用户可以选择部分商品进行下单，而不一定是全部：
我们定义一个selected变量，记录所有被选中的商品：
选中一个
我们给商品前面的复选框与selected绑定，并且指定其值为当前购物车商品：
初始化全选
我们在加载完成购物车查询后，初始化全选：
计算总价格（使用reduce方法）
然后编写一个计算属性，计算出选中商品总价格：
computed:{
//计算总价格
//数组的reduce()方法：
/**
* 参数一： 一个函数（使用箭头函数）代表运算逻辑
* 函数的两个参数
* c1: 用于存储累计的结果
* c2: 当前需要运算的元素
* 参数二： 默认值
*/
totalPrice(){
return this.selected.reduce((c1,c2)=>c1+c2.price*c2.num,0);
}
},
在页面中展示总价格：
效果：
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
在本篇文章里小编给大家分享了关于VUE前后端学习tab写法实例以及相关知识点，需要的朋友们参考下。2019-08-08
这篇文章主要给大家介绍了关于vue项目使用js监听浏览器关闭、刷新及后退事件的相关资料,文中通过代码介绍的非常详细,对大家学习或者使用vue具有一定的参考借鉴价值,需要的朋友可以参考下2023-09-09
在实际开发中,Vue组件之间的数据传递是最常见的需求,由于组件的作用域相互独立,如何在父子、兄弟和跨级组件间传递数据就显得尤为重要,本文将详细介绍多种Vue组件间传递数据的方,需要的朋友可以参考下2025-03-03
这篇文章主要介绍了vue3+TS实现自定义指令长按触发绑定的函数,文中给大家分享了编写自定义指令时遇到的几个难点，本文结合实例代码给大家介绍的非常详细，需要的朋友可以参考下2022-12-12
这篇文章主要介绍了vue 鼠标移入移出(hover)切换显示图片问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
今天小编就为大家分享一篇vue项目使用axios发送请求让ajax请求头部携带cookie的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了Vue网络请求的三种实现方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-09-09
本文主要介绍了vue3中使用jsx的实现步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-07-07
文章介绍了如何在Vue组件的`onMounted`生命周期钩子中获取`movable-area`和`movable-view`组件的实例,从而计算出可滑动的距离,示例代码展示了这一过程,感兴趣的朋友跟随小编一起看看吧2025-02-02
在Vue中使用Viser说明(基于AntV-G2可视化引擎)
这篇文章主要介绍了在Vue中使用Viser说明(基于AntV-G2可视化引擎)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
最新评论