SOURCE

var app = new Vue({
  el: '#app',
  data: {
    list: [
      {
        id: '1',
        name: 'iPhone 7',
        price: 6188,
        count: 1
      },
      {
        id: '2',
        name: 'iPad Pro',
        price: 5188,
        count: 1
      },
      {
        id: '3',
        name: 'MacBook Pro',
        price: 21488,
        count: 1
      }
    ]
  },
  computed: {
    totalPrice: function() {
      var total = 0;
      for(var i = 0; i < this.list.length; i++) {
        var item = this.list[i];
        total += item.price * item.count;
      }
      return total.toString().replace(/\B(?=(\d{3})+$)/g,',');
    }
  },
  methods: {
    handleRow: function(index) {
      console.log(this.list[index].checked)
    },
    handleReduce: function(index) {
      if(this.list[index].count === 1) return;
      this.list[index].count--;
    },
    handleAdd: function(index) {
      this.list[index].count++;
    },
    handleRemove: function(index) {
      this.list.splice(index, 1);
    }
  }
})

<div id="app" cloak>
  <template v-if="list.length">
    <table>
      <thead>
        <tr>
          <th>序号</th>
          <th>商品名称</th>
          <th>商品单价</th>
          <th>购买数量</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in list">
          <td>{{ index + 1 }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.price }}</td>
          <td>
            <button @click="handleReduce(index)" :disabled="item.count===1">-</button>
            {{ item.count }}
            <button @click="handleAdd(index)">+</button>
          </td>
          <td>
            <button @click="handleRemove(index)">移除</button>
          </td>
        </tr>
      </tbody>
    </table>
    <div>总价：￥{{ totalPrice }}</div>
  </template>
  <div v-else>购物车为空</div>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>

[v-cloak] {
  display: none;
}
table {
  border: 1px soli #e9e9e9;
  border-collapse: collapse;
  border-spacing: 0;
  empty-cells: show;
}

th, td {
  padding: 8px 16px;
  border: 1px solid #e9e9e9;
  text-align: left;
}

th {
  background-color: #f7f7f7;
  color: #5c6b77;
  font-weight: 600;
  white-space: nowrap;
}