js过滤器及累加器reduce的运用

<template>
    <view class="">
        <view class="inP" v-for="(item,index) in items" :key="index">
                <text>{{item.name}}</text>
                <view class="" style="margin-left: 20rpx;display: flex; align-items: center;">
                    <button type="default" @click="item.value -= 1" :disabled="item.value <= 0">-</button>
                    <text>{{item.value}}</text>
                    <button @click="item.value+=1">+</button>
                </view>
                <view class="" style="margin-left: 20rpx ;">
                    <text>{{item.prise | prisf(1) }}</text>
                </view>
                <view class="" style="margin-left: 20rpx ;">
                    <text>{{item.value*item.prise | prisf(2) }}</text>
                </view>
        </view>
        
        
        <view class="" style="margin-left:35rpx;">
            <text>总数量{{total}}件</text>
        </view>
        <view class="" style="margin-left:35rpx; margin-top: 10rpx">
            <text>总价格{{toprise | prisf(2)}}</text>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                   items:[
                       {
                           id:1,
                           name:"桃子",
                           prise:22,
                           value:1,
                           sum:''
                       },
                      {
                           id:1,
                           name:"粒子",
                           prise:10,
                           value:1,
                           sum:''
                      }, 
                   ],
                    }
        },
        
        // 过滤器
        filters:{
            // 局部
            prisf(data,n){
                // 添加人民币符号以及2位小数点
                return '￥' +data.toFixed(n)
            }
        },
            
        computed:{
            // 计算总数量
            total(){
                // var n = 0;
                // this.items.forEach(function(item){
                //     n+=item.value
                // });
                // return n;
                
                // reduce 累加器
                // total 计算结束后的返回值，cur 为当前值，为初始化
                return this.items.reduce((total,cur) => total+cur.value,0);
            },
            
            toprise(){
                // 总价格为数量乘以价格，cur.value*cur.prise
                return this.items.reduce((total,cur) => total + cur.value*cur.prise,0);
            }
        },
        
        onLoad() {

        },
        methods: {

        }
    }
</script>

<style>
    
    .inP{
        width: 90%;
        margin-left: 50%;
        transform: translateX(-50%);
        padding: 20rpx;
        display: flex;
        align-items: center;
}
</style>