vue+vant-UI框架实现购物车的复选框全选和反选功能


Posted in Javascript onNovember 05, 2019

购物车页面的设计图

vue+vant-UI框架实现购物车的复选框全选和反选功能

商品的列表

vue+vant-UI框架实现购物车的复选框全选和反选功能

代码:

<ul v-if="shoppingListData.rows.length">
<li
v-for="(item,index) in shoppingListData.rows"
:key="index"
>
<van-checkbox
:value="item.goods_id"
v-model="item.isChecked"
checked-color="#07c160"
@click="chooseChange(item.goods_id)"
></van-checkbox>
<div class="list_details">
<div class="shop_img"><img
:src="item.goods_image+'?w=150&h=150&crop=1'"
alt=""
></div>
<div class="goods_presentation">
<div class="pTitle"><p class="p1">{{item.goods_name}}</p></div>
<!-- <p class="p2">{{item.color}}</p> -->
<div class="price">
<span class="spanSprice">{{item.now_price | formatMoney}}</span>
<span class="span_step">
<button
@click="handleReduce(index)"
:disabled="item.goods_qty===1"
>-</button>
<i>{{item.goods_qty}}</i>
<button @click="handleAdd(index)">+</button>
</span>
</div>
</div>
</div>
</li>
</ul>

全选的复选框

vue+vant-UI框架实现购物车的复选框全选和反选功能

全选的代码:

<div class="footerflex">
     <van-checkbox
      v-model="AllChecked"
      @click="checkAll"
     >全选</van-checkbox>
     <span 
     class="management" 
     v-if="managementShow"
     @click="management()"
     >管理</span>
     <span 
     class="finish"
     v-if="finishShow"
     @click="management()"
     >完成</span>
     <van-button type="default" class='delete' @click="sureDel()" v-if="finishShow">删除</van-button>
     <div v-if="managementShow">
      <span class="summation">合计</span>
      <i>{{ totalPrice }}</i>
      <van-button type="default" class="pay" @click="closeAnAccount()">结算</van-button>
     </div>
    </div>

单选的change事件

vue+vant-UI框架实现购物车的复选框全选和反选功能

代码:

// 单选的change事件
  chooseChange(id) {
   if (this.selectedData.indexOf(id) > -1) {
    this.remove(this.selectedData, id);
   } else {
    this.selectedData.push(id);
   }
   if (this.selectedData.length < this.shoppingListData.total) {
    this.AllChecked = false;
   } else {
    this.AllChecked = true;
   }
   console.log(this.selectedData);
  }

全选的JS

vue+vant-UI框架实现购物车的复选框全选和反选功能

全选的代码:

// 全选和反选
  checkAll() {
   let list = this.shoppingListData.rows;
   if (this.AllChecked) {
    list.forEach(element => {
     element.isChecked = false;
    });
    this.selectedData = [];
   } else {
    list.forEach(element => {
     element.isChecked = true;
     if (this.selectedData.indexOf(element.goods_id) < 0) {
      this.selectedData.push(element.goods_id);
     }
    });
    console.log(this.selectedData);
   }
  },

数组删除

vue+vant-UI框架实现购物车的复选框全选和反选功能

代码

//数组删除
  remove(arr, val) {
   var index = arr.indexOf(val);
   if (index > -1) {
    arr.splice(index, 1);
   }
  }

总结

以上所述是小编给大家介绍的vue+vant-UI框架实现购物车的复选框全选和反选功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
JS模拟的QQ面板上的多级可展开的菜单
Oct 10 Javascript
基于JQuery的访问WebService的代码(可访问Java[Xfire])
Nov 19 Javascript
web网页按比例显示图片实现原理及js代码
Aug 09 Javascript
分享Javascript中最常用的55个经典小技巧
Nov 29 Javascript
jquery遍历筛选数组的几种方法和遍历解析json对象
Dec 13 Javascript
60个很实用的jQuery代码开发技巧收集
Dec 15 Javascript
js实现超简单的展开、折叠目录代码
Aug 28 Javascript
iscroll实现下拉刷新功能
Jul 18 Javascript
JS实现评价的星星功能
Aug 20 Javascript
countUp.js实现数字动态变化效果
Oct 17 Javascript
Vue.js自定义指令学习使用详解
Oct 19 Javascript
JS如何实现在弹出窗口中加载页面
Dec 03 Javascript
Vue通过WebSocket建立长连接的实现代码
Nov 05 #Javascript
原生js实现随机点名功能
Nov 05 #Javascript
element-ui 文件上传修改文件名的方法示例
Nov 05 #Javascript
vue keep-alive 动态删除组件缓存的例子
Nov 04 #Javascript
javascript如何实现create方法
Nov 04 #Javascript
关于vue里页面的缓存详解
Nov 04 #Javascript
vue2.0 获取从http接口中获取数据,组件开发,路由配置方式
Nov 04 #Javascript
You might like
在php MYSQL中插入当前时间
2008/04/06 PHP
PHP注释实例技巧
2008/10/03 PHP
php实现源代码加密的方法
2015/07/11 PHP
PHP实现批量重命名某个文件夹下所有文件的方法
2017/09/04 PHP
tp5(thinkPHP5)框架连接数据库的方法示例
2018/12/24 PHP
smarty模板的使用方法实例分析
2019/09/18 PHP
laravel 字段格式化 modle 字段类型转换方法
2019/09/30 PHP
Laravel框架实现抢红包功能示例
2019/10/31 PHP
说说掌握JavaScript语言的思想前提想学习js的朋友可以看看
2009/04/01 Javascript
JavaScript Date对象使用总结
2009/05/14 Javascript
用js判断是否为360浏览器的实现代码
2015/01/15 Javascript
原生js实现autocomplete插件
2016/04/14 Javascript
JavaScript事件用法浅析
2016/10/31 Javascript
js放到head中失效的原因与解决方法
2017/03/07 Javascript
NodeJs使用Mysql模块实现事务处理实例
2017/05/31 NodeJs
Vue点击切换颜色的方法
2018/09/13 Javascript
vue 进阶之实现父子组件间的传值
2019/04/26 Javascript
微信小程序全局变量GLOBALDATA的定义和调用过程解析
2019/09/23 Javascript
利用JavaScript模拟京东按键输入功能
2020/12/01 Javascript
用Python的Flask框架结合MySQL写一个内存监控程序
2015/11/07 Python
更改Python的pip install 默认安装依赖路径方法详解
2018/10/27 Python
浅谈Python中eval的强大与危害
2019/03/13 Python
解析Python3中的Import
2019/10/13 Python
Python实现AI换脸功能
2020/04/10 Python
django和flask哪个值得研究学习
2020/07/31 Python
CSS3实现翘边的阴影效果的代码示例
2016/06/13 HTML / CSS
描述RIP和OSPF区别以及特点
2015/01/17 面试题
总裁岗位职责
2013/12/04 职场文书
儿子婚宴答谢词
2014/01/09 职场文书
社区领导班子四风问题原因分析及整改措施
2014/09/28 职场文书
2014年企业员工工作总结
2014/12/09 职场文书
保险公司反洗钱宣传活动总结
2015/05/08 职场文书
2015年小学校长工作总结
2015/05/19 职场文书
PyTorch的Debug指南
2021/05/07 Python
java设计模式--三种工厂模式详解
2021/07/21 Java/Android
插件导致ECharts被全量引入的坑示例解析
2022/09/23 Javascript