网站建设公司效果免费推广平台排行榜

 1.reduce方法

​ reduce方法的使用（数组方法）： 遍历数组，求和

​ 语法：数组名.reduce((pre,current) => {},参数2)

​ pre:上次执行该方法的返回值

​ current：数据项

​ 实例代码：

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模板中，你可以将这个计算属性绑定到一个数据属性上，以便在页面上显示：

<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>