基于vue购物车的全选，清空，实时计算等功能
来源：华佗健康网
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<style type="text/css">
img{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="app">
<div class="row text-center align-items-center">
<h3 class="col-6 offset-3">购物车</h3>
<div @tap="qk()" @click="qk()" class="text-danger col-3 small ">
清空购物车
</div>
</div>
<template v-for=" item in gwc " >
<div class="media p-2 border-bottom">
<input type="checkbox" v-model="item.ischecked" />
<img :src="item.src" >
<div class="media-body">
<div >
{{item.sname}}
</div>
<div class="d-flex justify-content-between mt-5 " >
<div>￥{{item.price.toFixed(2)}}</div>
<div> <span @click="item.sl>1?item.sl--:item.sl">-</span> {{item.sl}} <span @click="item.sl++" >+</span> </div>
</div>
</div>
</div>
</template>
<div class="fixed-bottom">
<input type="checkbox" v-model="qbnr" /> 全选 合计： <span class="text-danger"> ￥ {{totalprice.toFixed(2)}} </span> <button type="button" class="btn btn-sm btn-danger" >去结算（{{qjsgs}}）</button>
</div>
</div>
</body>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
gwc:[
{ id:1,ischecked:true,src:"img/1.avif",sname:"汉康土豆 90",price:1.9,sl:1 },
{ id:2,ischecked:false,src:"img/2.avif",sname:"美人豆腐 400g/盒",price:2,sl:1 },
{ id:3,ischecked:true,src:"img/3.png.avif",sname:"优质西红柿 300g",price:2.2,sl:1 }
]
},
methods:{
qk(){
this.gwc = []
}
},
computed:{
qjsgs(){
var zj = 0;
for (let g of this.gwc) {
if(g.ischecked) zj++;
}
return zj
},
totalprice(){
var zj = 0;
for (let g of this.gwc) {
if(g.ischecked) zj += g.price*g.sl;
}
return zj
},
qbnr:{
get:function(){
if(this.gwc.length==0) return false;
for (let g of this.gwc) {
if(!g.ischecked){
return false;
}
}
return true;
},
set:function(value){
for (let g of this.gwc) {
g.ischecked = value
}
}
}
}
})
</script>
</html>
因篇幅问题不能全部显示，请点此查看更多更全内容