vue购物车思路及代码（更新）

购物车

结构：商品列表，商品数量加减，商品勾选，商品总金额，删除商品，商品全选

思路

商品列表：通过商品列表数据渲染列表，商品加减事件通过点击事件控制item.count++/–，当达到限购数量(xgsl)或0时禁用按钮

<li v-for="item in 商品arr">
	{{商品信息}}
    <button @clink="item.count--" :disabled="item.count==1">-</button>
    <button @clink="item.count++" :disabled="item.count==item.xgsl">+</button>
</li>

商品勾选：通过多选框绑定选中arr，value设置为商品对象item，直接在选中arr中添加商品对象用于计算总金额就不需要和商品arr比对选中的是那几个商品

<input type="checkbox" v-model="选中arr" :value="item"/>vue
<input type="checkbox" v-model="选中arr" :value="item"/>react

商品总金额：通过遍历选中arr计算使用计算属性展示数据，这样当商品数量改变时就能自动重新计算总金额

总金额：{{ zje }}

//script
computed:{
	zje(){
		this.zje=""
		this.选中arr.forEach(this.zje+item.dj*item.sl)
		return zje
	}
}

删除商品：不能直接传参数index中商品arr中删除，如果删除已选中的商品时总金额并不会刷新，因为选中arr中还有被删除的商品的信息，并且使用index并不能在选中arr中找到对应的商品信息删除；

删除的正确方式：参数传每个商品唯一的id，在商品arr和选中arr中过滤

<button @clink="spdelete(id)">
    delete
</button>

//script
spdelete(id){
	this.选中arr=this.选中arr.filter(item => item.id !== id)
	this.商品arr=this.商品arr.filter(item => item.id !== id)
}

商品全选：单选框勾选则让选中arr==商品arr，不勾选则选中arr=[]；

<input type="radio" v-model="isqx" @change="qx"/>全选或全不选

//script
qx(){
	if(this.isqx){
            this.选中arr= this.商品arr
    }else{
            this.选中arr = []
    }
}

当勾选全部商品时，则全选勾上：通过给每个商品的多选框添加change事件，当改变时触发函数判断商品arr长度是否等于选中arr长度，相同则勾选。

<input type="checkbox" v-model="选中arr" :value="item" @change="pdisqx"/>vue
<input type="checkbox" v-model="选中arr" :value="item" @change="pdisqx"/>react

//script
pdisqx(){
	if(选中arr==商品arr){
		this.isqx=true
	}else{
		this.isqx=flase
	}
}

当删除部分商品时达到全选或全选条件，让删除时多触发一个验证全选的函数

<button @clink="spdelete(id)">
    delete
</button>

//script
pdisqx(){
	if(选中arr==商品arr){
		this.isqx=true
	}else{
		this.isqx=flase
	}
},
spdelete(id){
	this.选中arr=this.选中arr.filter(item => item.id !== id)
	this.商品arr=this.商品arr.filter(item => item.id !== id)
	this.paisqx()
}