uniapp,vue购物车全选单选总额的解决方法

1.首先我们都知道uniapp的checkbox的原理。

2.在data数据中定义(首先需要确定的服务端发过来的数据中是有确定选择框是否选中的值)

3.首先完成全选,全选的业务逻辑就是,当全选被选中,单选全部选中,当全选未选中,单选一都不选中。

全选按钮:

业务逻辑:遍历购物车数据,将其的选中状态置为全选按钮的状态,即可

 4.单选的业务逻辑,当单选框全选中,全选也选中,当单选框只要有一项没选中,全选就要不选中。当某一个单选框状态改变时,我们可以判断,状态改变后,是选中还是没有选中,如果未选中,则全选框也为未选中,如果该单选框状态选中,则判断其他项单选框状态是否选中,如果都选中,则全选也为选中,如果有一项状态为未选中,则全选未选中。

单选:

单选逻辑:

5.对于算总钱数,就很简单了,为了复用,我们封装一个函数:

 6.然后只要在单选和全选逻辑后面都添加该函数,然后将data里面的钱数据渲染到页面即可。

  • 3
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值