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

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

创新互联专注为客户提供全方位的互联网综合服务，包含不限于成都网站建设、网站设计、迭部网络推广、小程序制作、迭部网络营销、迭部企业策划、迭部品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们大的嘉奖；创新互联为所有大学生创业者提供迭部建站搭建服务，24小时服务热线：18980820575，官方网址：www.cdcxhl.com

购物车的基本页面如下：

先说实现的总体思路

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}}
              

                删除
              
            

          

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

          已选商品{{count}}件，共￥{{price}}元 数组{{checked}}

          
          结算
        
        

      

本文标题：Vue实现购物车的全选、单选、显示商品价格代码实例-创新互联
本文URL：http://cdkjz.cn/article/deiccp.html