今天做了一個簡單的購物車功能，主要用了計算屬性，指令等知識點，程式碼如下：

<template>
<div>
    <div  id="cart" v-cloak>
        <template v-if="itemlis.length">
          <table>
              <thead>
                  <tr>
                      <th></th>
                      <th
 
>商品名稱</th>
                      <th>商品單價</th>
                      <th>購買數量</th>
                      <th>操作</th>
                  </tr>
              </thead>
              <tbody>
                  <tr v-for=" (item,index) in itemlis"
 
 :key="index">
                    <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 class="total">總價：¥{{totalPrice}}</div>
        </template>
         <div v-else>購物車為空</div>
    </div>
</div>
</template>
<script>
import Vue from 'vue'
import VueResource from 'vue-resource'

Vue.use(VueResource)
export default {
  data () {
    return {
      itemlis: []
    }
  },
  computed: {
//計算並獲取總價
    totalPrice () {
      let total = 0
      for (let i = 0; i < this.itemlis.length; i++) {
        let item = this.itemlis[i]
        total += item.price * item.count
      }
      return total.toString().replace(/\B(?=(\d{3})+$)/g, ',')
    }
  },
  methods: {

  //獲取商品列表
    getGoodList () {
      this.$http.get('api/goodlist').then(
        res => {
          var arrJson = JSON.parse(res.bodyText)
          this.itemlis = arrJson.data.list
        },
        function (err) {
          console.log(err)
        }
      )
    },
    //減少商品數量
    handleReduce (index) {
      if (this.itemlis[index].count === 1) return
      this.itemlis[index].count--
    },
     //增加商品數量
    handleAdd (index) {
      this.itemlis[index].count++
    },
    //從購物車中移除該商品
    handleRemove (index) {
      this.itemlis.splice(index, 1)
    }
  },
  mounted () {
  //獲取商品
    this.getGoodList()
  }
}
</script>

<style scoped>
.total{
    text-align: left ;
}
[v-cloak]{
    display: none;
}
table{
    border: 1px solid #e9e9e9;
    border-collapse: collapse;
    border-spacing: 0;
    empty-cells: show;
}
th,td{
    padding: 8px 16px;
    border:1px solid #e9e9e9;
    text-align: left
}
th{
    background: #f7f7f7;
    color: #5c6b77;
    font-weight: 600;
    white-space: nowrap;
}
</style>