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 option删除代码集合
Nov 12 Javascript
jquery获得下拉框值的代码
Aug 13 Javascript
『jQuery』取指定url格式及分割函数应用
Apr 22 Javascript
offsetHeight在OnLoad中获取为0的现象
Jul 22 Javascript
js 数组操作之pop,push,unshift,splice,shift
Jan 29 Javascript
如何将网页表格内容导入excel
Feb 18 Javascript
jQuery中DOM树操作之复制元素的方法
Jan 23 Javascript
JS中的==运算: [''] == false —&gt;true
Jul 24 Javascript
解析JavaScript数组方法reduce
Dec 12 Javascript
总结javascript三元运算符知识点
Sep 28 Javascript
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
Oct 25 Javascript
jquery实现抽奖功能
Oct 22 jQuery
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
Linux下 php5 MySQL5 Apache2 phpMyAdmin ZendOptimizer安装与配置[图文]
2008/11/18 PHP
非常精妙的PHP递归调用与静态变量使用
2012/12/16 PHP
php实现redis数据库指定库号迁移的方法
2015/01/14 PHP
php实现对两个数组进行减法操作的方法
2015/04/17 PHP
php微信高级接口调用方法(自定义菜单接口、客服接口、二维码)
2016/11/28 PHP
Laravel中的Blade模板引擎示例详解
2017/10/10 PHP
浅析php如何实现爬取数据原理
2018/09/27 PHP
让浏览器DOM元素最后加载的js方法
2014/07/29 Javascript
JavaScript实现找出字符串中第一个不重复的字符
2014/09/03 Javascript
JavaScript中用于四舍五入的Math.round()方法讲解
2015/06/15 Javascript
gameboy网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点
2016/02/21 Javascript
javascript稀疏数组(sparse array)和密集数组用法分析
2016/12/28 Javascript
JS实现css hover操作的方法示例
2017/04/07 Javascript
vue构建单页面应用实战
2017/04/10 Javascript
简单谈谈JS中的正则表达式
2017/09/11 Javascript
Angular 5.0 来了! 有这些大变化
2017/11/15 Javascript
js实现关闭网页出现是否离开提示
2017/12/07 Javascript
基于 Immutable.js 实现撤销重做功能的实例代码
2018/03/01 Javascript
vue框架搭建之axios使用教程
2018/07/11 Javascript
解决vue路由后界面没有变化,但是链接有的问题
2018/09/01 Javascript
详解VUE Element-UI多级菜单动态渲染的组件
2019/04/25 Javascript
在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)
2020/09/11 Javascript
Python 正则表达式入门(初级篇)
2016/12/07 Python
详解python配置虚拟环境
2019/04/08 Python
Django forms表单 select下拉框的传值实例
2019/07/19 Python
python requests指定出口ip的例子
2019/07/25 Python
应届毕业生求职信范文
2013/12/18 职场文书
大学生关于奋斗的演讲稿
2014/01/09 职场文书
个人承诺书怎么写
2014/05/24 职场文书
公司授权委托书范文
2014/08/02 职场文书
奥巴马经典演讲稿
2014/09/13 职场文书
学习优秀党务工作者先进事迹材料思想报告
2014/09/17 职场文书
基层党员学习党的群众路线教育实践活动心得体会
2014/11/04 职场文书
酒店客房服务员岗位职责
2015/04/09 职场文书
python编写函数注意事项总结
2021/03/29 Python
Python包管理工具pip的15 个使用小技巧
2021/05/17 Python