vue中reduce属性的使用@3@

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>
相关推荐
....492几秒前
Vue3 与 AntV X6 节点传参、自动布局及边颜色控制教程
前端·javascript·vue.js
machinecat2 分钟前
Webpack模块联邦 - vue项目嵌套react项目部分功能实践
前端·webpack
Ares-Wang4 分钟前
Vue2 VS Vue3
javascript
今禾4 分钟前
深入浅出:ES6 Modules 与 CommonJS 的爱恨情仇
前端·javascript·面试
前端小白19954 分钟前
面试取经:Vue篇-Vue2响应式原理
前端·vue.js·面试
子兮曰4 分钟前
⭐告别any类型!TypeScript从零到精通的20个实战技巧,让你的代码质量提升300%
前端·javascript·typescript
前端AK君5 分钟前
如何开发一个SDK插件
前端
小满xmlc5 分钟前
WeaveFox AI 重新定义前端开发
前端
日月晨曦7 分钟前
大文件上传实战指南:让「巨无霸」文件也能「坐高铁」
前端
bug_kada7 分钟前
防抖函数:从闭包入门到实战进阶,一篇文章全搞定
前端·javascript