13518219792
网站建设资讯

NEWS

网站建设资讯

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

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

创新互联从2013年开始，先为金安等服务建站，金安等地企业，进行企业商务咨询服务。为金安企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

购物车的基本页面如下：

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：


        

          
            

              
              图片
              商品名
              数量
              单价
              总金额
              加入时间
              删除
            

          

          
            

              
              
              {{dateil.product.productName}}
              {{dateil.detailProductnum}}
              {{dateil.detailProductprice}}
              {{dateil.detailProductprice*dateil.detailProductnum}}
              {{dateil.detailDatetime}}
              
                
              
            


          

        

        
购物车空空如也，请先去购买商品~

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实现购物车的全选、单选、显示商品价格详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持！


网站名称：Vue实现购物车的全选、单选、显示商品价格代码实例
标题来源：http://cdweb.net/article/gedpcj.html

其他资讯