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 相关文章推荐
Javascript 键盘keyCode键码值表
Dec 24 Javascript
围观tangram js库
Dec 28 Javascript
javascript重写alert方法的实例代码
Mar 29 Javascript
JavaScript用Number方法实现string转int
May 13 Javascript
jquery实现的省市区三级联动
Apr 02 Javascript
使用Node.js给图片加水印的方法
Nov 15 Javascript
js前端解决跨域问题的8种方案(最新最全)
Nov 18 Javascript
vue2组件实现懒加载浅析
Mar 29 Javascript
hammer.js实现图片手势放大效果
Aug 29 Javascript
基于ajax和jsonp的原生封装(实例)
Oct 16 Javascript
AngularJS双向数据绑定原理之$watch、$apply和$digest的应用
Jan 30 Javascript
vue基于mint-ui实现城市选择三级联动
Jun 30 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中3des加密代码(完全与.net中的兼容)
2012/08/02 PHP
PHP生成图片缩略图类示例
2017/01/12 PHP
javascript 四则运算精度修正函数代码
2010/05/31 Javascript
基于jquery异步传输json数据格式实例代码
2013/11/23 Javascript
基于jQuery的AJAX和JSON实现纯html数据模板
2016/08/09 Javascript
JavaScript实现兼容IE6的收起折叠与展开效果实例
2017/09/20 Javascript
vue自定义过滤器创建和使用方法详解
2017/11/06 Javascript
浅谈vue项目优化之页面的按需加载(vue+webpack)
2017/12/11 Javascript
jQuery中ajax获取数据赋值给页面的实例
2017/12/31 jQuery
Vue.js 点击按钮显示/隐藏内容的实例代码
2018/02/08 Javascript
vue组件实现弹出框点击显示隐藏效果
2020/10/26 Javascript
vue超时计算的组件实例代码
2018/07/09 Javascript
实现Vue的markdown文档可以在线运行的方法示例
2018/12/11 Javascript
基于JS判断对象是否是数组
2020/01/10 Javascript
JavaScript中的this/call/apply/bind的使用及区别
2020/03/06 Javascript
Vue实现可移动水平时间轴
2020/06/29 Javascript
如何将python中的List转化成dictionary
2016/08/15 Python
详解python实现读取邮件数据并下载附件的实例
2017/08/03 Python
python列表生成式与列表生成器的使用
2018/02/23 Python
从请求到响应过程中django都做了哪些处理
2018/08/01 Python
Python pyinotify模块实现对文档的实时监控功能方法
2018/10/13 Python
基于python3监控服务器状态进行邮件报警
2019/10/19 Python
Python 实现日志同时输出到屏幕和文件
2020/02/19 Python
jupyter notebook插入本地图片的实现
2020/04/13 Python
GANT葡萄牙官方商店:拥有美国运动服传统的生活方式品牌
2018/10/18 全球购物
高级工程师岗位职责
2013/12/15 职场文书
电力公司个人求职信范文
2014/02/04 职场文书
《蜗牛》教学反思
2014/02/18 职场文书
信用社主任竞聘演讲稿
2014/05/23 职场文书
学校标语大全
2014/06/19 职场文书
经典团队口号大全
2014/06/21 职场文书
领导班子对照检查材料
2014/09/22 职场文书
个人债务授权委托书范本
2014/10/05 职场文书
员工升职自荐信
2015/03/27 职场文书
教师创先争优承诺书
2015/04/27 职场文书
零基础学java之方法的定义与调用详解
2022/04/10 Java/Android