vue购物车总金额计算

购物车金额计算通常比较复杂，利用vue提供的计算属性和双向数据绑定可以很轻松的解决问题

这是一个很丑陋的效果图
功能代码如下：
首先在data里面定义一个数组，然后利用for循环出来

<ul>
    <li v-for="item,index in list" :key="index">
        <div>
            <input type="checkbox" :value="item" v-model="checkgroup"/>
            <span>商品名：{{item.name}}</span>
            <span>数量：{{item.number}}</span>
            <span>价格：{{item.price}}</span>
            <button @click="add(item)">+</button>
            <button @click="reduce(item)">-</button>
        </div>
    </li>
</ul>
<p>价格多少钱：{{money}}</p>

然后再到data里面定义一个checkgroup的空数组。然后利用v-model='checkgroup'，然后利用计算属性来监听变化。

computed:{
    money(){
        var sum=0;
       for(var i in this.checkgroup){
           sum+=this.checkgroup[i].price*this.checkgroup[i].number;
       }
       return sum;
    }
}

最后加入@click点击事件即可。

methods:{
    add(item){
        item.number++;

    },
    reduce(item){
        item.number--;
        if(item.number<=0){
            item.number=0;
        }
    }
}