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>