一、思路
1.创建数组对象，用来存放添加到购物车的商品。再创建一个数组用来存放勾选的商品对象。
2.用v-for循环遍历添加到购物车的商品来显示，用v-model绑定多选框，将勾选的数据存入数组。
3.求和：对勾选的数组进行遍历，把价格和数量计算综合
4.全选和全不选：当勾选全选的时候，让勾选的数组对象等于购物车的商品对象。
5.根据勾选全部商品，判断全选：当勾选全部商品后，判断勾选数组长度和购物车数组长度，且不为零，对全选和全不选操作。点击删除按钮，还要进行此判断，防止删除后两个数组不同，但却全选。
6.删除购物车商品：点击删除，使用数组下标进行位置删除。把删除的数据筛选出来，没删除的赋值给购物车数组，进行购物车更新。点击删除。购物车变换，执行判断全选和全不选。
二、代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../lib/vue.global.js"></script>
<style type="text/css">
img{
width: 100px;
height: 100px;
}
li{
display: flex;
justify-content: space-around;
padding: 10px;
}
</style>
</head>
<body>
<div id="box">
<ul>
<input type="checkbox" v-model="ischeck" @change="handleAll" />全选
<span v-if="dataList.length==0">添加您的购物车</span>
<li v-for="(item,index) in dataList" :key="item.id">
<input type="checkbox" v-model="choose" :value="item" @change="handleItem"/>
<img :src="item.pic"/>
<div>
{{item.name}}
<span style="color:red">￥{{item.price}}</span>
</div>
<div >
<button type="button" @click="item.number--" :disabled="item.number==1">-</button>
{{item.number}}
<button type="button" @click="item.number++" :disabled="item.number==item.limit">+</button>
<button type="button" @click="handleD(index,item.id)">删除</button>
</div>
</li>
</ul>
<div >
总金额：{{sum()}}
</div>
</div>
<script type="text/javascript">
var obj={
data(){
return{
dataList:[
{
name:"商品1",
price:10,
number:1,
id:1,
limit:5,
pic:"http://img.daimg.com/uploads/allimg/220224/3-2202241Q324.jpg"
},
{
name:"商品2",
price:20,
number:1,
id:2,
limit:10,
pic:"http://img.daimg.com/uploads/allimg/220224/3-2202241Q324.jpg"
},
{
name:"商品3",
price:10,
number:1,
id:3,
limit:2,
pic:"http://img.daimg.com/uploads/allimg/220224/3-2202241Q324.jpg"
}
],
choose:[],
ischeck:false
}
},
methods:{
sum(){
var total=0;
this.choose.forEach(item => {
total+=(item.price*item.number)
});
return total;
},
handleD(index,id){
this.dataList.splice(index,1);
this.choose=this.choose.filter(item=>item.id!=id)
this.handleItem();
},
handleAll(){
if(this.ischeck){
this.choose=this.dataList
}else{
this.choose=[]
}
},
handleItem(){
if(this.choose.length===this.dataList.length&&this.choose.length!=0){
this.ischeck=true
}else{
this.ischeck=false
}
}
}
}
var vm= Vue.createApp(obj).mount("#box")
</script>
</body>
</html>
|