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 相关文章推荐
避免回车键导致的页面无意义刷新的解决方法
Apr 12 Javascript
js中的scroll和offset 使用比较的实例与分析
Sep 29 Javascript
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
Apr 11 Javascript
Javascript获取当前时间函数和时间操作小结
Oct 01 Javascript
jQuery实现灰蓝风格标准二级下拉菜单效果代码
Aug 31 Javascript
jQuery实现商品活动倒计时
Oct 16 Javascript
angular中实现li或者某个元素点击变色的两种方法
Jul 27 Javascript
深入理解vue-router之keep-alive
Aug 31 Javascript
jQuery 操作 HTML 元素和属性的方法
Nov 12 jQuery
Vue的路由及路由钩子函数的实现
Jul 02 Javascript
解决Layui中layer报错的问题
Sep 03 Javascript
JavaScript字符和ASCII实现互相转换
Jun 03 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按字符串长度分割成数组代码
2015/05/17 PHP
Yii2框架中日志的使用方法分析
2017/05/22 PHP
jQuery 通过事件委派一次绑定多种事件,以减少事件冗余
2010/06/30 Javascript
只需20行代码就可以写出CSS覆盖率测试脚本
2013/04/24 Javascript
javascript中的return和闭包函数浅析
2014/06/06 Javascript
JavaScript实现弹出子窗口并传值给父窗口
2014/12/18 Javascript
JavaScript判断数组是否存在key的简单实例
2016/08/03 Javascript
jQuery dataTables与jQuery UI 对话框dialog的使用教程
2016/09/02 Javascript
通过修改360抢票的刷新频率和突破8车次限制实现方法
2017/01/04 Javascript
React中ES5与ES6写法的区别总结
2017/04/21 Javascript
构建Vue大型应用的10个最佳实践(小结)
2019/11/07 Javascript
Vue-CLI与Vuex使用方法实例分析
2020/01/06 Javascript
vue使用better-scroll实现滑动以及左右联动
2020/06/30 Javascript
Python按行读取文件的实现方法【小文件和大文件读取】
2016/09/19 Python
python线程池(threadpool)模块使用笔记详解
2017/11/17 Python
python 同时运行多个程序的实例
2019/01/07 Python
Appium Python自动化测试之环境搭建的步骤
2019/01/23 Python
python 用所有标点符号分隔句子的示例
2019/07/15 Python
Python requests上传文件实现步骤
2020/09/15 Python
Python用Jira库来操作Jira
2020/12/28 Python
python matlab库简单用法讲解
2020/12/31 Python
h5使用canvas画布实现手势解锁
2019/01/04 HTML / CSS
德国狗狗用品在线商店:Schecker
2017/03/17 全球购物
ALDO英国官网:加拿大女鞋品牌
2018/02/19 全球购物
2014年师德承诺书
2014/05/23 职场文书
兵马俑导游词
2015/02/02 职场文书
个人合作协议范本
2015/08/06 职场文书
学习心得体会
2019/06/20 职场文书
入党转正申请自我鉴定
2019/06/25 职场文书
Pytest实现setup和teardown的详细使用详解
2021/04/17 Python
python爬虫框架feapde的使用简介
2021/04/20 Python
OpenCV-Python实现油画效果的实例
2021/06/08 Python
纯CSS如何禁止用户复制网页的内容
2021/11/01 HTML / CSS
mysql函数全面总结
2021/11/11 MySQL
使用CSS自定义属性实现骨架屏效果
2022/06/21 HTML / CSS
Debian11 Xfce终端光标的颜色怎么设置?
2022/08/14 数码科技