用Vue来实现一个购物车的–购买数量的加减,勾选,小计,总计,删(单列,批量)的基本功能
页面结构,通常我们会先将整体分为3个部分,头部(header),内容区整体(tbody),尾部(footer),的结构来构造页面,如下
<div class="box">
<div class="header">
<div class="item-title">
<input type="checkbox" @click="checkall" :checked="checkedflag"> 全选
</div>
<div class="item-title">
名称
</div>
<div class="item-title">
价格
</div>
<div class="item-title">
数量
</div>
<div class="item-title">
小计
</div>
<div class="item-title">
操作
</div>
</div>
<div class="tbody">
<div class="item-tr" v-for="item in list" :key="item.id">
<div class="item-shopcar">
<input type="checkbox" v-model="item.ischecked">
</div>
<div class="item-shopcar">
{{item.name}}
</div>
<div class="item-shopcar">
{{item.price.toFixed(2)}}
</div>
<div class="item-shopcar">
<!-- v-if="item.num<1?item.num=1:item.num" -->
<button @click="reduce(item.id)" v-show="item.num>1">-</button>
<input :value="item.num">
<button @click="add(item.id)">+</button>
</div>
<div class="item-shopcar">
{{(item.price * item.num).toFixed(2)}}
</div>
<div class="item-shopcar" @click="del(item.id)">
删除
</div>
</div>
</div>
<div class="footer">
<div class="item-account">
<button @click="delall">批量删除</button>
</div>
<div class="item-account"></div>
<div class="item-account"></div>
<div class="item-account"></div>
<div class="item-account">
总数{{subtotal}}
</div>
<div class="item-account">
结算{{total}}
</div>
</div>
</div>
Vue代码对页面渲染的事件等驱动部分
<script>
var vue = new Vue({
el: ".box",
data: {
checkedflag: true,
//数据来源
list: [{ id: 1, name: "商品一", price: 200, num: 1, ischecked: true },
{ id: 2, name: "商品二", price: 400, num: 1, ischecked: true },
{ id: 3, name: "商品三", price: 600, num: 1, ischecked: true },
{ id: 4, name: "商品四", price: 800, num: 2, ischecked: true }]
},
methods: {
//批量删除
delall() {
for (var i = 0; i < this.list.length; i++) {
var indexitem = this.list[i];
if (indexitem.ischecked) {
var index = this.list.indexOf(indexitem);
this.list.splice(index, 1);
i--;
}
}
},
//全选
checkall(e) {
this.list.filter(item => {
item.ischecked = e.target.checked;
})
},
// 加数量
add(id) {
this.list.forEach((item, index) => {
if (index + 1 == id) {
item.num++;
}
});
},
// 减数量
reduce(id) {
this.list.forEach((item, index) => {
if (index + 1 == id) {
item.num--;
}
});
},
// 删除
del(id) {
if (confirm("您确定是否删除?")) {
this.list = this.list.filter(item => item.id != id)
}
},
},
// 监听用来监听data的数据,只要数据做出了改变,那么监听的事件就会触发
watch: {
//全选的监听
// checkedflag(flag) {
// for (var i = 0; i < this.list.length; i++) {
// this.list[i].ischecked = flag;
// }
// },
//单选的监听
list: {
deep: true,
handler(list) {
this.checkedflag = list.every(item => item.ischecked)
if (list.length == 0) {
this.checkedflag = false;
}
}
}
},
//补充data的值,将值直接渲染到页面,用于计算
computed: {
//小计
subtotal() {
let sum = 0;
this.list.forEach(item => {
if (item.ischecked) {
sum += item.num;
}
})
return sum;
},
//总计
total() {
let totalall = 0;
this.list.forEach(item => {
if (item.ischecked) {
totalall += item.num * item.price;
}
})
return totalall;
}
}
});
</script>
可直接粘贴代码进行拷贝运行,以上代码,还有很多的优化,以及功能的增强,欢迎各位前来指正