image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/vue.js"></script>
<style>
li {
display: flex;
justify-content: space-around;
text-align: center;
line-height: 100px;
height: 100px;
padding: 10px;
}
img {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="box">
<div v-if='list.length === 0'>空空如也</div>
<template v-else>
<input type="checkbox" v-model="isAllCheckedComputed">全选/全不选
<ul>
<li v-for='(item,index) in list' :key='item.id'>
<div>
<input type="checkbox" v-model='checkgroup' :value="item" >
</div>
<img :src="item.pic" alt="">
<div>{{item.name}}</div>
<div>￥{{item.price}}</div>
<div>{{item.id}}</div>
<div>
<button @click="item.number--" :disabled="item.number===1">-</button>
{{item.number}}
<button @click="item.number++" :disabled="item.number === item.limit">+</button>
</div>
<div>
<button @click="handleDel(index,item.id)">删除</button>
</div>
</li>
</ul>
<div style="text-align: right;padding: 0 50px;">
总价{{sum()}}
</div>
</template>
</div>
<script>
var vm = new Vue({
el: '#box',
data: {
checkgroup: [],
// isAllChecked: false,
list: [
{
"id": 1,
"name": "商品1",
"number": 1,
"pic": "https://c-ssl.duitang.com/uploads/blog/202011/16/20201116210409_fdb12.jpg",
"msg": "头像",
"price": 10,
"limit": 1,//限购
},
{
"id": 2,
"name": "商品2",
"number": 2,
"pic": "https://c-ssl.duitang.com/uploads/blog/202010/31/20201031204228_sewqy.jpg",
"msg": "头像",
"price": 20,
"limit": 5,//限购
},
{
"id": 3,
"name": "商品3",
"number": 3,
"pic": "https://c-ssl.duitang.com/uploads/item/202005/23/20200523141101_ungtj.jpg",
"msg": "头像",
"price": 30,
"limit": 10,//限购
},
]
},
methods: {
sum() {
var total = 0
this.checkgroup.forEach(item => {
total += item.price * item.number
})
return total
},
// 删除方法
handleDel(index, deleteid) {
// 删除checkgroup里面对应的元素，通过id
this.checkgroup = this.checkgroup.filter(item => item.id !== deleteid)
// 删除原数组，通过index
this.list.splice(index, 1)
}
},
computed:{
isAllCheckedComputed:{
set(isChecked){
console.log(isChecked)
if(isChecked){
this.checkgroup = this.list
}else{
this.checkgroup = []
}
},
get(){
return this.checkgroup.length === this.list.length
}
}
}
})
</script>
</body>
</html>
