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>
相关推荐
Cosolar几秒前
前端如何实现VAD说话检测?
前端
CodeSheep18 分钟前
当了leader才发现,大厂最想裁掉的,不是上班总迟到的,也不是下班搞失联的,而是经常把这3句话挂在嘴边的
前端·后端·程序员
吃饺子不吃馅23 分钟前
✨ 你知道吗?SVG 里藏了一个「任意门」——它就是 foreignObject! 🚪💫
前端·javascript·面试
IT_陈寒1 小时前
Python开发者必须掌握的12个高效数据处理技巧,用过都说香!
前端·人工智能·后端
gnip8 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
一只叫煤球的猫9 小时前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试
excel10 小时前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端
掘金安东尼11 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手14 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法14 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架