用vue实现购物车增删改

<template>
  <div>
    <table>
      <thead>
        <tr>
          <!-- 绑定全选事件 -->
          <th><input type="checkbox" @change="addAll" />全选</th>
          <th>商品名</th>
          <th>单价</th>
          <th>数量</th>
          <th>小计</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <!-- 先让他们循环 用结构语法写-->
        <tr v-for="({ name, price, num }, i) in products" :key="i">
          <!-- v-model要存data的值 -->
          <td><input type="checkbox" v-model="products[i].checked" /></td>
          <td>{{ name }}</td>
          <td>{{ price }}</td>
          <td>
            <!-- products是一个数组 下标可以找到对象 意思就是这个数组下的某个对象的某个属性 -->
            <button @click="products[i].num--" :disabled="num == 1">-</button>
            <!-- 这是个双向绑定 -->
            <input type="text" v-model="products[i].num" />
            <button @click="products[i].num++">+</button>
          </td>
          <td>{{ num * price }}</td>
          <!-- 怎么删除数组中的某个元素:splice(i,n) 删除序号i开始的n个元素-->
          <td>
            <button @click="products.splice(i, 1)">删除</button>
          </td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="6">总价格:{{ sum }}</td>
        </tr>
      </tfoot>
    </table>
  </div>
</template>

<script>
export default {
  // 全选操作事件
  methods: {
    addAll(e) {
      //遍历每个元素的checked 都变成和全选一样
      this.products.forEach((p) => (p.checked = e.target.checked));
      console.log(e.target.checked);
    },
    removeP(i) {
      this.products.splice(i, 1);
    },
  },
  computed: {
    sum() {
      // 只加勾选了的
      return this.products.reduce((s, p) => s + p.price * p.num * p.checked, 0);
    },
  },
  data() {
    return {
      products: [
        { name: "草莓", price: 7, num: 18, checked: true },
        { name: "橘子", price: 8, num: 11, checked: false },
        { name: "西瓜", price: 9, num: 12, checked: true },
        { name: "哈密瓜", price: 10, num: 13, checked: false },
        { name: "苹果", price: 11, num: 14, checked: false },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
//写table样式
table {
  //点击文字的时候不要有选中效果
  user-select: none;
  //边框合并,如果不把单元格合并单元格和单元格之间有缝隙
  border-collapse: collapse;

  // 给td和th加样式
  th,
  td {
    //给边
    border: 1px solid rgb(86, 86, 155);
    //给内容和边框之间的间距 上下5px 左右30px
    padding: 5px 30px;
    //让文字居中
    text-align: center;
  }
  //属性选择器
  [type="text"] {
    width: 50px;
    text-align: center;
  }
}
</style>