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>