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的面向对象(一)
Nov 09 Javascript
javascript让setInteval里的函数参数中的this指向特定的对象
Jan 31 Javascript
Js 刷新框架页的代码
Apr 13 Javascript
Javascript遍历Html Table示例(包括内容和属性值)
Jul 08 Javascript
JavaScript中的Math.E属性使用详解
Jun 12 Javascript
JavaScript如何实现对数字保留两位小数一位自动补零
Dec 18 Javascript
举例说明JavaScript中的实例对象与原型对象
Mar 11 Javascript
JavaScript省市级联下拉菜单实例
Feb 14 Javascript
HTML5+jQuery实现搜索智能匹配功能
Mar 24 jQuery
微信小程序中form 表单提交和取值实例详解
Apr 20 Javascript
vue引入jq插件的实例讲解
Sep 12 Javascript
JS指定音频audio在某个时间点进行播放
Nov 28 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 SEO优化之URL优化方法
2011/04/21 PHP
php轻量级的性能分析工具xhprof的安装使用
2015/08/12 PHP
Yii使用技巧大汇总
2015/12/29 PHP
Add Formatted Data to a Spreadsheet
2007/06/12 Javascript
js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
2012/12/27 Javascript
JavaScript中的Math 使用介绍
2014/04/21 Javascript
jQuery 中DOM 操作详解
2015/01/13 Javascript
jQuery中on()方法用法实例详解
2015/02/06 Javascript
JavaScript+html5 canvas绘制渐变区域完整实例
2016/01/26 Javascript
angular5 子组件监听父组件传入值的变化方法
2018/09/30 Javascript
JSON.stringify()方法讲解
2019/01/31 Javascript
vue移动端实现手机左右滑动入场动画
2020/06/17 Javascript
Node.js API详解之 dns模块用法实例分析
2020/05/15 Javascript
Python实现的几个常用排序算法实例
2014/06/16 Python
python模拟Django框架实例
2016/05/17 Python
Python网络编程中urllib2模块的用法总结
2016/07/12 Python
Python的爬虫框架scrapy用21行代码写一个爬虫
2017/04/24 Python
python对DICOM图像的读取方法详解
2017/07/17 Python
对Tensorflow中权值和feature map的可视化详解
2018/06/14 Python
python3使用SMTP发送简单文本邮件
2018/06/19 Python
详解Python中的内建函数,可迭代对象,迭代器
2019/04/29 Python
使用Python制作一个打字训练小工具
2019/10/01 Python
Python列表list操作相关知识小结
2020/01/29 Python
Pytorch中.new()的作用详解
2020/02/18 Python
python 伯努利分布详解
2020/02/25 Python
如何通过python检查文件是否被占用
2020/12/18 Python
python 装饰器的基本使用
2021/01/13 Python
芝加哥牛排公司:Chicago Steak Company
2018/10/31 全球购物
Nike比利时官网:Nike.com (BE)
2019/02/07 全球购物
美国社交购物市场:MassGenie
2019/02/18 全球购物
网络维护管理员的自我评价分享
2013/11/11 职场文书
外贸采购员岗位职责
2015/04/03 职场文书
团结主题班会
2015/08/13 职场文书
Pytest之测试命名规则的使用
2021/04/16 Python
在HTML5 localStorage中存储对象的示例代码
2021/04/21 Javascript