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 相关文章推荐
基于jquery的关于动态创建DOM元素的问题
Dec 24 Javascript
JavaScript中定义函数的三种方法
Mar 12 Javascript
JavaScript数据类型之基本类型和引用类型的值
Apr 01 Javascript
JavaScript数组前面插入元素的方法
Apr 06 Javascript
最简单的JavaScript验证整数、小数、实数、有效位小数正则表达式
Apr 17 Javascript
向JavaScript的数组中添加元素的方法小结
Oct 24 Javascript
详解JavaScript对象序列化
Jan 19 Javascript
JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)
Jun 24 Javascript
微信小程序 HTTPS报错整理常见问题及解决方案
Dec 14 Javascript
详解微信小程序——自定义圆形进度条
Dec 29 Javascript
jQuery Validate 无法验证 chosen-select元素的解决方法
May 17 jQuery
vue.js组件vue-waterfall-easy实现瀑布流效果
Aug 22 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写出自己的BLOG系统 2
2010/04/12 PHP
php+ajax简单实现全选删除的方法
2016/12/06 PHP
php 解决扫描二维码下载跳转问题
2017/01/13 PHP
PHP实现的XXTEA加密解密算法示例
2018/08/28 PHP
laravel5表单唯一验证的实例代码
2019/09/30 PHP
两个Javascript小tip资料
2010/11/23 Javascript
一次失败的jQuery优化尝试小结
2011/02/06 Javascript
使用js实现一个可编辑的select下拉列表
2014/02/20 Javascript
js类型转换与引用类型详解(Boolean_Number_String)
2014/03/07 Javascript
javascript学习笔记(七)Ajax和Http状态码
2014/10/08 Javascript
Javascript与jQuery方法的隐藏与显示
2015/01/19 Javascript
Javascript中Array用法实例分析
2015/06/13 Javascript
JavaScript与ActionScript3两者的同性与差异性
2016/09/22 Javascript
详解node单线程实现高并发原理与node异步I/O
2017/09/21 Javascript
详解微信小程序开发用户授权登陆
2019/04/24 Javascript
微信小程序非跳转式组件授权登录的方法示例
2019/05/22 Javascript
Python3标准库总结
2019/02/19 Python
Python协程 yield与协程greenlet简单用法示例
2019/11/22 Python
TensorFlow MNIST手写数据集的实现方法
2020/02/05 Python
HTML5 drag和drop具体使用详解
2021/01/18 HTML / CSS
Expedia意大利旅游网站:酒店、机票和租车预订
2017/10/30 全球购物
Craghoppers德国官网:户外和旅行服装
2020/02/14 全球购物
如何手工释放资源
2013/12/15 面试题
咖啡店的创业计划书,让你hold不住
2014/01/03 职场文书
客户表扬信范文
2014/01/10 职场文书
创业计划书如何吸引他人眼球
2014/01/10 职场文书
毕业生如何写自荐信
2014/03/26 职场文书
3分钟英语演讲稿
2014/04/29 职场文书
2014年银行年终工作总结
2014/12/19 职场文书
导游词300字
2015/02/13 职场文书
2015年办公室文员工作总结
2015/04/24 职场文书
管辖权异议上诉状
2015/05/23 职场文书
2016年安全生产先进个人事迹材料
2016/02/29 职场文书
开网店计划分析
2019/07/30 职场文书
七年级上册生物的课件
2019/08/07 职场文书
微信小程序实现轮播图指示器
2022/06/25 Javascript