购物车金额计算通常比较复杂，利用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;
}
}
}
