今天中午废了一会时间，总算把项目中的购物车的单选、全选、以及实现数据的动态显示做出来了，给小白分享一下我个人一个解决办法：
创新互联从2013年开始，先为金安等服务建站，金安等地企业，进行企业商务咨询服务。为金安企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
购物车的基本页面如下：
先说实现的总体思路
这是我个人的思路，具体代码实现如下：
html：
图片 商品名 数量 单价 总金额 加入时间 删除 {{dateil.product.productName}} {{dateil.detailProductnum}} {{dateil.detailProductprice}} {{dateil.detailProductprice*dateil.detailProductnum}} {{dateil.detailDatetime}}
Vue中的数据应该这样写
var vue = new Vue({
el: '#a',
data: {
list: [],
checkall: false,
checked: [],
price:0,
count:0,
}
js:
checkAll: function() {
/**
*控制全选反选
*/
var _this = this
//true的时候是全选，false是不选
if(this.checkall) {
// 实现反选，按钮选中时 实现了反选，列表为空
this.checked = []
this.price=0;
this.count=0;
} else {
// 实现全选
this.price=0;
this.count=0;
this.checked = []
this.list.forEach(function(dateil) {
_this.price+=parseInt(dateil.detailProductprice);
_this.count+=parseInt(dateil.detailProductnum);
_this.checked.push(dateil.detailId)
})
}
if(this.checked.length === this.list.length) {
this.checkall = true
// console.log(this.checkall)
// console.log(this.checked)
}
}
/**
* 当单选框选中时
*/
checkAll: function() {
var _this = this
//true的时候是全选，false是不选
if(this.checkall) {
// 实现反选，按钮选中时 实现了反选，列表为空
this.checked = []
this.price=0;
this.count=0;
} else {
// 实现全选
this.price=0;
this.count=0;
this.checked = []
this.list.forEach(function(dateil) {
_this.price+=parseInt(dateil.detailProductprice);
_this.count+=parseInt(dateil.detailProductnum);
_this.checked.push(dateil.detailId)
})
}
if(this.checked.length === this.list.length) {
this.checkall = true
// console.log(this.checkall)
// console.log(this.checked)
}
}
这样一个购物车的全选、单选、与数据的显示就完成了。
以上所述是小编给大家介绍的Vue实现购物车的全选、单选、显示商品价格详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持！
