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 相关文章推荐
js刷新框架子页面的七种方法代码
Nov 20 Javascript
JS高级拖动技术 setCapture,releaseCapture
Jul 31 Javascript
JavaScript中Null与Undefined的区别解析
Jun 30 Javascript
基于js实现微信发送好友如何分享到朋友圈、微博
Nov 30 Javascript
js表单元素checked、radio被选中的几种方法(详解)
Aug 22 Javascript
vue router使用query和params传参的使用和区别
Nov 13 Javascript
vue动态绑定组件子父组件多表单验证功能的实现代码
May 14 Javascript
详解在React.js中使用PureComponent的重要性和使用方式
Jul 10 Javascript
微信小程序url传参写变量的方法
Aug 09 Javascript
JavaScript链式调用实例浅析
Dec 19 Javascript
jQuery实现可编辑的表格
Dec 11 jQuery
VUE : vue-cli中去掉路由中的井号#操作
Sep 04 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
PHP全局变量与超级全局变量区别分析
2016/04/01 PHP
php/JS实现的生成随机密码(验证码)功能示例
2019/06/06 PHP
PHP笛卡尔积实现原理及代码实例
2020/12/09 PHP
自动检查并替换文本框内的字符
2006/06/30 Javascript
超级退弹代码
2008/07/07 Javascript
JS获取图片实际宽高及根据图片大小进行自适应
2013/08/11 Javascript
js判断url是否有效的两种方法
2014/03/04 Javascript
JS实现自动固定顶部的悬浮菜单栏效果
2015/09/16 Javascript
jquery实现网页的页面平滑滚动效果代码
2015/11/02 Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
2017/01/19 Javascript
Node.JS更改Windows注册表Regedit的方法小结
2017/08/18 Javascript
详解RequireJs官方使用教程
2017/10/31 Javascript
javascript回调函数详解
2018/02/06 Javascript
nodejs连接mysql数据库及基本知识点详解
2018/03/20 NodeJs
JS实现json对象数组按对象属性排序操作示例
2018/05/18 Javascript
Vue登录注册并保持登录状态的方法
2018/08/17 Javascript
Webpack4 使用Babel处理ES6语法的方法示例
2019/03/07 Javascript
小程序异步问题之多个网络请求依次执行并依次收集请求结果
2019/05/05 Javascript
express框架中使用jwt实现验证的方法
2019/08/25 Javascript
js瀑布流布局的实现
2020/06/28 Javascript
vue实现用户长时间不操作自动退出登录功能的实现代码
2020/07/23 Javascript
[46:43]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#2LGD VS MVP.Phx第二局
2016/03/02 DOTA
Python实现的微信公众号群发图片与文本消息功能实例详解
2017/06/30 Python
Python3 伪装浏览器的方法示例
2017/11/23 Python
浅析Python函数式编程
2018/10/06 Python
python实现音乐播放和下载小程序功能
2020/04/26 Python
Python selenium模块实现定位过程解析
2020/07/09 Python
彪马英国官网:PUMA英国
2019/02/11 全球购物
南非最大的在线时尚商店:Zando
2019/07/21 全球购物
大学毕业生的自我鉴定
2013/11/30 职场文书
村长贪污检举信
2014/04/04 职场文书
军训拉歌口号
2014/06/13 职场文书
委托代理人授权委托书范本
2014/09/24 职场文书
给老师的保证书怎么写
2015/05/09 职场文书
关于Python中*args和**kwargs的深入理解
2021/08/07 Python
vue2的 router在使用过程中遇到的一些问题
2022/04/13 Vue.js