Vue——02-02计算属性的复杂使用以及七种求和方法

上一章讲述了计算属性的基本使用，这里说一下复杂使用

​ 怎么使用计算属性computed：计算出所有books的总价格Price。

    
    
    
    


    

        
总价格：{{totalPrice}}
    
    
    

 首先写入

 computed: {
    totalPrice:function() {
    //写出七种方法
}
}

一共有七种求和方法：

第一种：利用for循环遍历

totalPrice:function() {
                     let total = 0;
                     for(let i = 0; i

 第二种：forEach

totalPrice: function () {
                     let total = 0;
                     this.books.forEach((item) => {
                         total += item.price
                     })
                     return total;
                 } 

第三种：for in

totalPrice: function () {
                    let total = 0;
                    for (let i in this.books){
                        total += this.books[i].price
                    }
                    return total;
                } 

第四种：for of

totalPrice: function () {
                    let total = 0;
                    for(let value of this.books){
                        total += value.price
                    }
                    return total
                }

第五种：map

totalPrice: function () {
                    this.books.map((item)=>{
                        total += item.price
                    })
                    return total;
                }

第六种：filter

totalPrice: function () {
                    let total = 0;
                    this.books.filter((item)=>{
                        console.log(item);
                        total += item.price
                    })
                    return total;
                }

第七种：reduce

totalPrice: function () {       
                    return this.books.reduce((currentTotal,item)=>{
                        console.log(item);
                        return currentTotal + item.price
                    },0)
                }

简写：

totalPrice: function () {       
                    return this.books.reduce((currentTotal,item)=>+item.price)
                }

下面是完整代码：

    
    
    
    


    

        
总价格：{{totalPrice}}
    
    
    

输出的price总和应为：448