vue中reduce属性的使用@3@

奋斗的小鸟鸟2024-09-12 18:16

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>