实现简单购物车-vue框架

刚刚接触vue框架不久，vue用起来确实很方便，省去了许多重复的操作，但是一开始使用vue框架确实不习惯，因为vue主要是通过改变数据来进行操作，转变思维方式很重要！

这是我第一次尝试使用vue实现基本的购物车逻辑，主要包括添加、减少、单个商品删除、已选商品删除、单选、全选操作。如有错误，还请指正，万分感谢！

 

样图：

html代码：

  <div id="app">
    <!-- 购物车页面 -->
    <div class="shoppingBar">
      <h2>购物清单</h2>
      <table>
        <tr>
          <th>
            <input type="checkbox" @change="checkedAll($event)">
            全选
          </th>
          <th>商品</th>
          <th>数量</th>
          <th>单价（元）</th>
          <th>金额（元）</th>
          <th>操作</th>
        </tr>

        <tr v-for="(item, index) in goods">
          <th>
            <input v-model="item.isSel" type="checkbox">
          </th>
          <th class="content">
            <img :src="item.image" width="100px" height="100px">
            <p>{{item.name}}</p>
          </th>
          <th>
            <button type="button" @click="decrease(index)">-</button>
            <span>{{item.count}}</span>
            <button type="button" @click="add(index)">+</button>
          </th>
          <th>{{item.price}}</th>
          <th>{{item.price * item.count}}</th>
          <th>
            <span id="delete" @click="deleteThis(index)">删除</span>
          </th>
        </tr>

      </table>

      <div class="shoppingBar-footer">
        <div class="manage">
          <span class="delAll" @click="deleteSelected">删除所选商品</span>
          <span class="return">继续购物</span>
        </div>

        <button id="go" type="button">去结算</button>

        <div class="buy">
          <span>{{countAll}}</span>
          件商品总计:
          <span>￥{{totalPrice}}</span>
        </div>
      </div>
    </div>
  </div>

 

js代码：

 

var app = new Vue({
      el: "#app",
      data: {
        goods: [{
          name: "Tissot 天梭力洛克系列钢带80机芯机械男表",
          image: "./goods-images/Tissot 天梭力洛克系列钢带80机芯机械男表 4600.png",
          price: 4600,
          count: 1,
          isSel: false
        }, {
          name: "Tissot 天梭力洛克系列钢带机械女表",
          image: "./goods-images/Tissot 天梭力洛克系列钢带机械女表 4450.png",
          price: 4450,
          count: 2,
          isSel: false
        },
        {
          name: "Tissot 天梭力洛克系列皮带80机芯机械男表",
          image: "./goods-images/Tissot 天梭力洛克系列皮带80机芯机械男表 4200.png",
          price: 4200,
          count: 3,
          isSel: false
        },
        {
          name: "Tissot 天梭力洛克系列皮带80机芯机械男表",
          image: "./goods-images/Tissot 天梭力洛克系列皮带80机芯机械男表1 4200.png",
          price: 4600,
          count: 4,
          isSel: true
        }
        ],
      },


      computed: {
        // 计算商品总数
        countAll: function () {
          var sum = 0;
          for (var i in this.goods) {
            if (this.goods[i].isSel) {
              sum += this.goods[i].count;
            }
          }
          return sum;
        },

        // 计算所选商品总价
        totalPrice: function () {
          var sum1 = 0;
          for (var i in this.goods) {
            if (this.goods[i].isSel) {
              sum1 += this.goods[i].count * this.goods[i].price;
            }
          }
          return sum1;
        },
      },


      methods: {
        // 点击加号
        decrease: function (index) {
          if (this.goods[index].count == 0) {
            return;
          } else {
            this.goods[index].count--;
          }
        },

        //点击减号
        add: function (index) {
          this.goods[index].count++;
        },

        // 点击全选
        checkedAll: function (e) {
          var isCheckedAll = e.target.checked; // e.target.checked 是当前复选框的状态值 true/false

          if (isCheckedAll) {
            for (var i in this.goods) {
              this.goods[i].isSel = true;
            }
          } else {
            for (var i in this.goods) {
              this.goods[i].isSel = false;
            }
          }
        },

        // 点击删除单条商品列表
        deleteThis: function (index) {
          this.goods.splice(index, 1);
        },

        // 点击删除所选商品列表
        deleteSelected: function () {
          for (var i = this.goods.length - 1; i >= 0; i--) {
            if (this.goods[i].isSel) {
              this.goods.splice(i, 1);
            }
          }
        }
      }
    });

 

 

 

css代码：

 

    .shoppingBar {
      width: 1000px;
      border: 1px solid #333;
      margin: 100px auto;
      position: relative;
    }

    .shoppingBar h2 {
      margin: 10px 5px;
      color: rgb(47, 136, 177);
    }

    .shoppingBar table {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 60px;
    }

    .shoppingBar table tr:first-of-type {
      border-top: 1px solid #333;
      border-bottom: 1px solid #333;
    }

    .shoppingBar table tr th img {
      width: 100px;
      height: 100px;
      float: left;
    }

    .shoppingBar table tr th p {
      float: right;
      width: 100px;
    }

    .shoppingBar table tr .content {
      width: 220px;
      padding: 0 80px;
      margin-right: 50px;
    }

    .shoppingBar table tr #delete {
      cursor: pointer;
    }

    .shoppingBar .shoppingBar-footer {
      width: 990px;
      height: 60px;
      line-height: 60px;
      position: absolute;
      bottom: 0;
      left: 10px;
    }

    .shoppingBar .shoppingBar-footer .manage {
      float: left;
      height: 40px;
    }

    .shoppingBar .shoppingBar-footer .manage .delAll,
    .return {
      cursor: pointer;
      background: #eee;
      padding: 5px 10px;
      border-radius: 2px;
    }

    .shoppingBar .shoppingBar-footer .buy {
      float: right;
      height: 40px;
    }

    .shoppingBar .shoppingBar-footer #go {
      float: right;
      height: 60px;
      width: 110px;
      font-weight: 400;
      font-size: 18px;
      outline: none;
      background: rgb(216, 129, 118);
      border: none;
      border-radius: 2px;
      margin-left: 10px;
      cursor: pointer;
    }

    .shoppingBar .shoppingBar-footer .buy span {
      font-weight: 400;
      color: red;
    }