代码：
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script><script src="../js/Vue.js"></script><style>tr {display: block;border-bottom: 1px dotted #dcdcdc;}td {width: 100px;text-align: center;}img {width: 80px;height: 80px;}input {width: 30px;text-align: center;}.bottom {width: 640px;height: 80px;line-height: 80px;margin-top: 10px;border: 1px solid #dcdcdc;}.qjs {width: 80px;height: 50px;background-color: red;color: white;font-size: 16px;border: 0;margin-left: 15px;}.jq::after {content: "￥";}.xj::after {content: "￥";}.del {cursor: pointer;}.del:hover{color: red;}.alldel {padding-left: 16px;cursor: pointer;}.red {color: red;}.alldel:hover {color: red;}.qlc {cursor: pointer;}.qlc:hover {color: red;}.trtop{height: 40px;}.spzj{margin-left: 95px;}</style></head><body><div id="app"><table class="tabzong"><tr class="trtop"><td><input type="checkbox" class="allchecked" v-model="allchecked" @click="alltype()"/>全选</td><td>商品</td><td>单价</td><td>商品数量</td><td>小计</td><td>操作</td></tr><tr v-for="(item) in list" :key="item.id"><td><input type="checkbox" @click="dx(item)" v-model="item.type"/></td><td><img:src=item.srcalt=""/></td><td class="jq">{{item.price}}</td><td><button @click="jian(item)" :disabled="item.disabled">-</button><input type="text" :value=item.num /><button @click="jia(item)">+</button></td><td class="xj">{{item.xiaoji}}</td><td class="del" @click="del(item.id)">删除</td></tr></table><div class="bottom"><span style="margin-right: 30px" class="alldel" @click="alldel()">删除所选商品</span><span class="qlc" @click="alldel()">清理购物车</span><span class="spzj">已经选中<span class="red">{{allshop}}</span>件商品总价:<span class="red">{{allnum}}￥</span></span><button class="qjs">去结算</button></div></div></body><script>let vm = new Vue({el:'#app',data() {return {allchecked:false,allshop:0,list:[{id:1,type:false,disabled:true,src:"https://img.alicdn.com/i2/2204920870409/O1CN01mobmIm1EtMniYVU0J_!!2204920870409.jpg",price:5,num:1,xiaoji:5},{id:2,disabled:true,type:false,src:"https://imgservice.suning.cn/uimg1/b2c/image/gKRneKhFHGnB1oh0Imoxcg.jpg_800w_800h_4e",price:3,num:1,xiaoji:3},{id:3,disabled:true,type:false,src:"https://imgservice.suning.cn/uimg1/b2c/image/ZzNpZsy4U3v8WgTbKqfN3A.jpg_800w_800h_4e",price:10,num:1,xiaoji:10},{id:4,disabled:true,type:false,src:"https://img2.baidu.com/it/u=4280167200,1529131522&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1066",price:20,num:1,xiaoji:20}]}},// 在这事件处理函数methods: {dx(arr){this.list.forEach(item=>{if(item.id==arr.id){item.type=!item.typeif(arr.type==true){this.allshop++}else{this.allshop--}}})let type = this.list.every(item=>{return item.type == true})console.log(type);this.allchecked=type},alltype(){let sum=0this.list.forEach(item=>{item.type=!this.allcheckedsum++})if(!this.allchecked){this.allshop=sum}else{this.allshop=0}},jian(arr){arr.num--arr.xiaoji=arr.num*arr.priceif(arr.num>1){arr.disabled=false}else{arr.disabled=true}},jia(arr){arr.num++arr.xiaoji=arr.num*arr.priceif(arr.num>1){arr.disabled=false}},del(id){let index=this.list.findIndex(item=>{item.id==id})this.list.splice(index,1)},alldel(){this.list = this.list.filter(item => !item.type);},},computed: {allnum(){let sum=0this.list.forEach(item=>{if( item.type==true){sum+=item.xiaoji}})return sum},}})</script>
</html>
效果图：
