简单购物车（购买数量增加减少，总价结算，移除）

效果图：

<div v-if="tableData.length">
        <table>
          <tr>
            <th></th>
            <th>书籍名称</th>
            <th>出版日期</th>
            <th>价格</th>
            <th>购买数量</th>
            <th>操作</th>
          </tr>
          <tr v-for="(item, index) in tableData">
            <td>{{ item.id }}</td>
            <td>{{ item.bookName }}</td>
            <td>¥{{ item.price.toFixed(2) }}</td>
            <td>{{ item.date }}</td>
            <td>
              <button
                @click="decrement(index)"
                v-bind:disabled="item.number <= 0"
              >
                -
              </button>
              <span>{{ item.number }}</span>
              <button @click="increment(index)">+</button>
            </td>
            <td>
              <button @click="remove(index)">移除</button>
            </td>
          </tr>
          <tr>
            <td colspan="3">总价格：¥{{totallyPrice.toFixed(2)}}</td>
          </tr>
        </table>
      </div>
      <div v-else>
        购物车空空如也~
      </div>

data() {
    return {
      safety: {
        name: "安全监控",
      },
      tableData: [
        {
          id: 1,
          bookName: "《数学》",
          date: "2006-9",
          price: 85,
          number: 1,
        },
        {
          id: 2,
          bookName: "《语文》",
          date: "2009-9",
          price: 84,
          number: 1,
        },
        {
          id: 3,
          bookName: "《英语》",
          date: "2009-5",
          price: 35,
          number: 1,
        },
      ],
    };
  },
  methods: {
    decrement(index) {
      this.tableData[index].number--;
    },
    increment(index) {
      this.tableData[index].number++;
    },
    remove(index) {
      this.tableData.splice(index, 1);
    },
  },
  computed:{
    totallyPrice(){
      let totallyPrice = 0;
      for(let i = 0 ;i < this.tableData.length; i++){
        totallyPrice += this.tableData[i].number * this.tableData[i].price;
      }
      return totallyPrice;
    }
  }