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 相关文章推荐
javascript 函数调用规则
Aug 26 Javascript
JQuery操作Select的Options的Bug(IE8兼容性视图模式)
Apr 21 Javascript
JQuery表单验证插件EasyValidator用法分析
Nov 15 Javascript
jQuery实现的多滑动门,多选项卡效果代码
Mar 28 Javascript
jQuery中的Deferred和promise 的区别
Apr 03 Javascript
jQuery验证插件validate使用详解
May 11 Javascript
轻松5句话解决JavaScript的作用域
Jul 15 Javascript
Javascript从数组中随机取出不同元素的两种方法
Sep 22 Javascript
详解用vue-cli来搭建vue项目和webpack
Apr 20 Javascript
浅谈React Event实现原理
Sep 20 Javascript
何时/使用 Vue3 render 函数的教程详解
Jul 25 Javascript
在Uni中使用Vue的EventBus总线机制操作
Jul 31 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 spl_autoload_register实现自动加载研究
2011/12/06 PHP
对比分析php中Cookie与Session的异同
2016/02/19 PHP
PHP PDOStatement::debugDumpParams讲解
2019/01/30 PHP
TBCompressor js代码压缩
2011/01/05 Javascript
Javascript 命名空间模式
2013/11/01 Javascript
Javascript实现飞动广告效果的方法
2015/05/25 Javascript
如何防止JavaScript自动插入分号
2015/11/05 Javascript
全面了解JavaScript对象进阶
2016/07/19 Javascript
关于JavaScript限制字数的输入框的那些事
2016/08/14 Javascript
浅析JavaScript动画模拟拖拽原理
2016/12/09 Javascript
实现微信小程序的wxml文件和wxss文件在webstrom的支持
2017/06/12 Javascript
three.js中文文档学习之通过模块导入
2017/11/20 Javascript
编写更好的JavaScript条件式和匹配条件的技巧(小结)
2019/06/27 Javascript
vue实现节点增删改功能
2019/09/26 Javascript
JavaScript实现简单进度条效果
2020/03/25 Javascript
在Vue中创建可重用的 Transition的方法
2020/06/02 Javascript
python画柱状图--不同颜色并显示数值的方法
2018/12/13 Python
Python3之字节串bytes与字节数组bytearray的使用详解
2019/08/27 Python
python 使用pdfminer3k 读取PDF文档的例子
2019/08/27 Python
python、Matlab求定积分的实现
2019/11/20 Python
Python3.x+迅雷x 自动下载高分电影的实现方法
2020/01/12 Python
Python Web项目Cherrypy使用方法镜像
2020/11/05 Python
Javascript 高级手势使用介绍
2013/04/21 HTML / CSS
HTML5调用手机摄像头拍照的实现思路及代码
2014/06/15 HTML / CSS
Sneaker Studio匈牙利:购买运动鞋
2018/03/26 全球购物
大整数数相乘的问题
2012/07/22 面试题
信息技术教学反思
2014/02/12 职场文书
挂职学习心得体会
2014/09/09 职场文书
大学生党员自我批评思想汇报
2014/10/10 职场文书
房屋产权证明书
2014/10/15 职场文书
安全生产工作汇报
2014/10/28 职场文书
汉字听写大会观后感
2015/06/12 职场文书
银行求职信范文
2019/05/13 职场文书
导游词之绍兴柯岩古镇
2020/01/09 职场文书
分析设计模式之模板方法Java实现
2021/06/23 Java/Android
redis数据一致性的实现示例
2022/03/18 Redis