Vue实现购物车的全选、单选、显示商品价格代码实例


Posted in Javascript onMay 06, 2019

今天中午废了一会时间,总算把项目中的购物车的单选、全选、以及实现数据的动态显示做出来了,给小白分享一下我个人一个解决办法:

购物车的基本页面如下:

Vue实现购物车的全选、单选、显示商品价格代码实例

先说实现的总体思路

  1. 1.给table表中表头th加一个 checkbox,设这两个事件:@click=”checkAll” v-model=”checkall”;
  2. 2.给对应的tr加一个 checkbox 绑定一个事件 v-model=”checked”,checked设为数组,专门放商品Id;
  3. 3.由于checkall默认为false,当我勾选全选框时,将checkall设为true,往checked数组中遍历添加所有商品ID,每列中的checkbox自动选中,此时已经实现全选的取消\选中了,当单选时,应该将checkAll的状态设为false,这样就能实现单选多选了;
  4. 4.最后一步就是对数据的动态显示了,data中绑定两个值,分别是price和count,当我勾选某一列时,通过@click=”xx(price,count,productId)”传值放到页面上;
  5. 5.单选的选中与取消可以通过判断商品id是否存在在数组中,即indexOf(productId)==-1,如果数组中是存在此商品ID,则点击单选框时应减少价格,反之增加。

这是我个人的思路,具体代码实现如下:

html:

<div id="a" class="container">
        <table class="table table-hover" v-if="list.length">
          <thead>
            <tr>
              <th><input type="checkbox" id="box" @click="checkAll" v-model="checkall" /></th>
              <th>图片</th>
              <th>商品名</th>
              <th>数量</th>
              <th>单价</th>
              <th>总金额</th>
              <th>加入时间</th>
              <th>删除</th>
            </tr>
          </thead>

          <tbody>
            <tr v-for="(dateil,index) in list" :key="index">
              <td><input type="checkbox" class="checkbox" v-model="checked"  @click="select(dateil.detailId,dateil.detailProductprice,dateil.detailProductnum)" :value="dateil.detailId" /></td>
              <td><a @click="goShop(dateil.detailProductId)" style="cursor: pointer;"><img v-bind:src="web_server_static+dateil.product.productPhoto"></a></td>
              <td><a @click="goShop(dateil.detailProductId)" style="cursor: pointer;">{{dateil.product.productName}}</a></td>
              <td>{{dateil.detailProductnum}}</td>
              <td>{{dateil.detailProductprice}}</td>
              <td>{{dateil.detailProductprice*dateil.detailProductnum}}</td>
              <td>{{dateil.detailDatetime}}</td>
              <td>
                <button type="button" id="but" @click="del(dateil.detailId)" class="btn btn-danger">删除</button>
              </td>
            </tr>

          </tbody>

        </table>
        <div v-else style="font-size: 25px;text-align: center; margin-top: 300px;height: 100px;">购物车空空如也,请先去购买商品~</div>
        <div id="label_btn">
          <span><label>已选商品<a>{{count}}</a>件,共</a>¥{{price}}</a>元 数组{{checked}}</label>

          </span>
          <span><button type="button" id="btn-close" @click="jiesuan()" class="btn btn-danger">结算</button></span>
        </div>
        <!--结算按钮-->

      </div>

Vue中的数据应该这样写

var vue = new Vue({
        el: '#a',
        data: {
          list: [],
          checkall: false,
           checked: [],
           price:0,
           count:0,
        }

js:

checkAll: function() {
            /**
            *控制全选反选
            */
            var _this = this
            //true的时候是全选,false是不选
            if(this.checkall) {
              // 实现反选,按钮选中时 实现了反选,列表为空
              this.checked = []
              this.price=0;
              this.count=0;
            } else {
              // 实现全选
                this.price=0;
              this.count=0;
              this.checked = []
              this.list.forEach(function(dateil) {
                _this.price+=parseInt(dateil.detailProductprice);
                _this.count+=parseInt(dateil.detailProductnum);
                _this.checked.push(dateil.detailId)
              })
            }
            if(this.checked.length === this.list.length) {
              this.checkall = true
              // console.log(this.checkall)
              // console.log(this.checked)
            }
          }
/**
           * 当单选框选中时
           */
          checkAll: function() {

            var _this = this
            //true的时候是全选,false是不选
            if(this.checkall) {
              // 实现反选,按钮选中时 实现了反选,列表为空
              this.checked = []
              this.price=0;
              this.count=0;
            } else {
              // 实现全选
                this.price=0;
              this.count=0;
              this.checked = []
              this.list.forEach(function(dateil) {
                _this.price+=parseInt(dateil.detailProductprice);
                _this.count+=parseInt(dateil.detailProductnum);
                _this.checked.push(dateil.detailId)
              })
            }
            if(this.checked.length === this.list.length) {
              this.checkall = true
              // console.log(this.checkall)
              // console.log(this.checked)
            }
          }

这样一个购物车的全选、单选、与数据的显示就完成了。

以上所述是小编给大家介绍的Vue实现购物车的全选、单选、显示商品价格详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
获取HTML DOM节点元素的方法的总结
Aug 21 Javascript
用js实现table单元格高宽调整,兼容合并单元格(兼容IE6、7、8、FF)实例
Jun 25 Javascript
javascript读取xml实现javascript分页
Dec 13 Javascript
jQuery中innerWidth()方法用法实例
Jan 19 Javascript
JavaScript返回上一页的三种方法及区别介绍
Jul 04 Javascript
JS采用绝对定位实现回到顶部效果完整实例
Jun 20 Javascript
canvas时钟效果
Feb 16 Javascript
vue组件Prop传递数据的实现示例
Aug 17 Javascript
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
Sep 22 jQuery
基于Vue的SPA动态修改页面title的方法(推荐)
Jan 02 Javascript
javscript 数组扁平化的实现
Feb 03 Javascript
electron踩坑之dialog中的callback解决
Oct 06 Javascript
JavaScript中关于base64的一些事
May 06 #Javascript
JavaScript中工厂函数与构造函数示例详解
May 06 #Javascript
微信小程序登录数据解密及状态维持实例详解
May 06 #Javascript
一文了解Vue中的nextTick
May 06 #Javascript
angular 服务随记小结
May 06 #Javascript
详解如何使用nvm管理Node.js多版本
May 06 #Javascript
关于AOP在JS中的实现与应用详解
May 06 #Javascript
You might like
文件上传程序的全部源码
2006/10/09 PHP
phpMyAdmin下载、安装和使用入门教程
2007/05/31 PHP
php判断输入不超过mysql的varchar字段的长度范围
2011/06/24 PHP
PHP 数据结构 算法描述 冒泡排序 bubble sort
2011/07/10 PHP
php重定向的三种方法分享
2012/02/22 PHP
php序列化函数serialize() 和 unserialize() 与原生函数对比
2015/05/08 PHP
jquery 图片Silhouette Fadeins渐显效果
2010/02/07 Javascript
JavaScript表达式:URL 协议介绍
2013/03/10 Javascript
基于jquery实现轮播特效
2016/04/22 Javascript
jQuery利用sort对DOM元素进行排序操作
2016/11/07 Javascript
JS绘制微信小程序画布时钟
2016/12/24 Javascript
js生成随机颜色方法代码分享(三种)
2016/12/29 Javascript
Angularjs 双向绑定时字符串的转换成数字类型的问题
2017/06/12 Javascript
Vue中的异步组件函数实现代码
2018/07/20 Javascript
JavaScript 扩展运算符用法实例小结【基于ES6】
2019/06/17 Javascript
微信小程序添加插屏广告并设置显示频率(一天一次)
2019/12/06 Javascript
JS动态图片的实现方法完整示例
2020/01/13 Javascript
[01:00:04]DOTA2上海特级锦标赛B组小组赛#1 Alliance VS Spirit第二局
2016/02/26 DOTA
[46:42]DOTA2-DPC中国联赛正赛 Aster vs Magma BO3 第二场 3月5日
2021/03/11 DOTA
python 类对象和实例对象动态添加方法(分享)
2017/12/31 Python
numpy.delete删除一列或多列的方法
2018/04/03 Python
Django框架model模型对象验证实现方法分析
2019/10/02 Python
Python+Selenium+phantomjs实现网页模拟登录和截图功能(windows环境)
2019/12/11 Python
PythonPC客户端自动化实现原理(pywinauto)
2020/05/28 Python
Linux面试经常问的文件系统操作命令
2016/10/04 面试题
工厂厂长岗位职责
2013/11/08 职场文书
全国税务系统先进集体事迹材料
2014/05/19 职场文书
2014大学生中国梦主题教育学习思想汇报
2014/09/10 职场文书
护理培训心得体会
2016/01/22 职场文书
小学教师教学反思
2016/02/24 职场文书
小学生六年级作文之关于感恩
2019/08/16 职场文书
六年级作文之预言作文
2019/10/25 职场文书
解决ObjectMapper.convertValue() 遇到的一些问题
2021/06/30 Java/Android
vue使用Google Recaptcha验证的实现示例
2021/08/23 Vue.js
Python经常使用的一些内置函数
2022/04/11 Python
Win11 Beta 22621.601 和 22622.601今日发布 KB5017384修复内容汇总
2022/09/23 数码科技