今天中午废了一会时间，总算把项目中的购物车的单选、全选、以及实现数据的动态显示做出来了，给小白分享一下我个人一个解决办法：

购物车的基本页面如下：

先说实现的总体思路

1.给桌子表中表头泰国(泰国)加一个复选框，设这两个事件：@ click=" CheckAll " v-model=" CheckAll "；2.给对应的tr加一个检验盒绑定一个事件v型="已检查",已检查设为数组，专门放商品id；3.由于选取或取消所有选取框默认为假的，当我勾选全选框时，将选取或取消所有选取框设为没错，往检查数组中遍历添加所有商品身份证，每列中的检验盒自动选中，此时已经实现全选的取消选中了，当单选时，应该将选取或取消所有选取框的状态设为假的，这样就能实现单选多选了；4.最后一步就是对数据的动态显示了，数据中绑定两个值，分别是价格和数数，当我勾选某一列时，通过@click="xx(价格、计数、productId)传值放到页面上；5.单选的选中与取消可以通过判断商品编号是否存在在数组中，即indexOf(productId)==-1，如果数组中是存在此商品身份证，则点击单选框时应减少价格，反之增加。这是我个人的思路，具体代码实现如下：

html:

div id=' a ' class=' container ' table class=' table-hover ' v-if=' list。length '和tr thin put type=' checkbox ' id=' box ' @ click=' checkAll ' v-model=' checkAll '/th图片/th商品名/th数量/th单价/th总金额/th加入时间/th删除/th/tr/ad t正文tr-for='列表： key=' index ' t input type=' checkbox ' class=' checkbox ' v-model=' checked ' @ click=' select(dateil。detailid，dateil.detailProductprice，dateil。detailproductnum)'):值=' dateil。detailid '/TD TDA @ click=' GosHop(dateil。detailproductid)' style='游标指针：'img v-bind : src=' http : web _ server _ static dateil。产品。product photo '/a/TD TDA @ click=' GoShop(dateil。DetailProductID)'样式='光标指针：'{ { dateil。产品。product name } }/a/TD { { dateil }。DetailProductNum } }/TD { { dateil。detailProductPrice } }/TD { { dateil。DetailProductNum } }/TD { { dateil。DetailProductNum } }/TD按钮类型='但是'按钮id='但是' @ click=' del(dateil。细节id)=“BTNBTN-危险”删除/button/TD/tr/t body/table div v-else style=' font-size : 25px；文本对齐：中心；边距-top : 300 px；高度： 100像素购物车空空如也，请先去购买商品~/div div id=' label _ BTN ' span标签已选商品a{{count}}/a件，共/a{{price}}/a元数组{ { checked } }/label/span span button type=' button ' id=' BTN-关闭' @ click=' jiesuan()' class=' BTN BTN-危险'结算/button/span /div！-结算按钮- /divVue中的数据应该这样写

var vue=new Vue({ el: '#a '，data: { list: []，checkall: false，checked: []，price:0，count:0，}js:

checkAll:函数(){ /** *控制全选反选*/var _this=this //true的时候是全选，假的是不选if(this.checkall) { //实现反选，按钮选中时实现了反选，列表为空这个。选中=[]这个。价格=0；这个。计数=0；} else { //实现全选这个。价格=0；这个。计数=0；这个。选中=[]这个。名单。foreach(function(dateil)){ _ this。price=ParSeint(dateil。detailProductPrice)；_这个。count=ParSeint(dateil。detailProductNum)；_这个。检查过了。push(dateil。detailid)})} if(this。检查过了。长度===这个。名单。长度){这个。checkall=true//console。日志(这个。check all)//控制台。日志(这个。选中)} }/* * *当单选框选中时*/checkAll:函数(){ var _this=this //true的时候是全选，假的是不选if(this.checkall) { //实现反选，按钮选中时实现了反选，列表为空这个。选中=[]这个。价格=0；这个。计数=0；} else { //实现全选这个。价格=0；这个。计数=0；这个。选中=[]这个。名单。foreach(function(dateil)){ _ this。price=ParSeint(dateil。detailProductPrice)；_这个。count=ParSeint(dateil。detailProductNum)；_这个。检查过了。push(dateil。detailid)})} if(this。检查过了。长度===这个。名单。长度){这个。checkall=true//console。日志(这个。check all)//控制台。日志(这个。选中)} }这样一个购物车的全选、单选、与数据的显示就完成了。

以上所述是小编给大家介绍的某视频剪辑软件实现购物车的全选、单选、显示商品价格详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！