vue入门------简单购物车功能实现(全选，数量加减，价格加减）

Posted 2021-03-10 zhaoxinran997

简易购物车功能（无任何布局 主要是功能）

• 数量的加减
• 商品的总价钱
• 全选与全不选
• 删除（全选、价格 受影响）

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <div id="box">
        全选：<input type="checkbox" @click="handleAllChecked($event)" v-model="isAllChecked"/>
        <ul>
          <li v-for="data,index in list" :key="data.id" style="overflow: hidden;">
            <input type="checkbox" :value="data" v-model="checkgroup" style="float: left;"
            @change="handleItemChange()"/>
            <div style="float: left;">
              <div>{{data.name}}</div>
              <div>价格:{{data.price}}</div>
              <!-- <div>数量：{{data.number}}</div> -->
            </div>

            <div style="float: left;margin-left: 20px;">
              <button @click="handleDel(data)">-</button>
              {{data.number}}
              <button @click="data.number++">+</button>
            </div>

            <div style="float: right;">
              <button @click='handleRemove(index,data.id)'>remove</button>
            </div>
          </li>
        </ul>
       
        {{checkgroup}}

        <p>总金额:{{ getSum() }}</p>
    </div>
    
    <script type="text/javascript">
       var vm =  new Vue({
          el:"#box",
          data:{
            name:"kerwin",
            checkgroup:[],
            isAllChecked:false,
            list:[
                {
                      name:"商品1",
                      price:10,
                      number:1,
                      id:"1",
                },
                    {
                      name:"商品2",
                      price:20,
                      number:2,
                      id:"2",
                    },
                    {
                      name:"商品3",
                      price:30,
                      number:3,
                      id:"3",
                    }
              ]
          },
          methods: {
            // 每个chekcbox 改变触发， 判读数组的长度与list长度
            handleItemChange(){
              console.log(this.checkgroup.length)
              if(this.checkgroup.length===this.list.length && this.list.length !== 0 ){
                //全选chekcbox勾上
                this.isAllChecked = true
              }else{
                // 取消checkbox勾选
                this.isAllChecked = false
              }
            },

            //全选按钮处理
            handleAllChecked(evt){
             
              if(evt.target.checked){
                //全选中
                this.checkgroup = this.list
              }else{
                //全不选中
                this.checkgroup = []
              }
            },
            //商品减少
            handleDel(data){
              data.number--
              if(data.number===0){
                data.number =1
              }
            },
         
            //计算总金额
            getSum(){
              var sum = 0;
              for(var i in this.checkgroup){
                sum += this.checkgroup[i].price*this.checkgroup[i].number
              }
              return sum
            },
            //删除数据       
            handleRemove(index,id) {
              //list
              this.list.splice(index,1)
              //checkgroup
              this.checkgroup =this.checkgroup.filter(item => item.id !== id)

              this.handleItemChange()         
            }
          },
        })
    </script>