Vue 原生基础购物车（学到就是赚到

<div id="content" v-cloak>  
    <!-- 标题 --> 
    <table style="border-collapse: collapse">
      <thead>
        <tr>
          <th>名称</th>
          <th>价格</th>
          <th>数量</th>
          <th>操作</th>
        </tr>
      </thead>
      <!-- 内容 -->
      <tbody>
        <!-- 循环，唯一，高效更新，index，id。。 -->
        <tr v-for="(a,index) in shop":key="a.name" :style="{backgroundColor:(a.num>0?'pink':'#fff')}">
          <td>{{a.name}}</td>
          <td>{{a.price}}</td>
          <td>
          <button v-show="a.num>0" @click="jian(a,index)">-</button>
          <span>{{a.num}}</span>
          <button @click="add(a,index);">+</button>
          </td>
          <td>
          <button @click="edit(a,index)">编辑</button>
          <button @click="del(a,index)">删除</button>
          </td>
        </tr>
      </tbody>
      <tfoot>
        <td></td>
        <td>
          <span>总价</span>
          <span>{{totalPrice}}</span>
        </td>
        <td>
          <span>总数量</span>
          <span>{{total}}</span>
        </td>
        <td></td>
        </tr>
      </tfoot>
    </table>
    <!-- 添加商品 -->
    <div id="add">
      <button id="adds" @click="addShop">添加商品</button>
      <div v-show="addStatus">
        <button @click="sureAdd">保存</button>
        <button @click="closeAdd">取消</button>
        <input type="text" v-model="addName">
        <input type="number" v-model="addPrice">
      </div>
    </div>
    <!-- 编辑商品 -->
    <div id="edit" v-if="editStatus">
      <div>
        <button @click="suerEdit();">确定</button>
        <button @click="closeEdit()">取消</button>
        <input type="text" v-model="editName">
        <input type="number" v-model="editNum">
      </div>
    </div>
  </div>

<style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    #content {
      width: 50%;
      margin-left: 50px;
    }
    table{
      width: 100%;
      border: 1px solid #000;
    }
    tr{
      height: 50px;
      text-align: center;
      border: 1px solid #ccc;
    }
    td button{
      padding-left:10px;
      padding-right: 10px;
    }
    #adds{
      width: 20%;
      height: 30px;
    }
    #add{
      width: 100%;
      margin-top: 15px;
    }
    #add div{
      margin-top: 5px;
    }
    #edit{
      width: 100%;
      margin-top: 15px;
    }
    #edit div{
      margin-top: 5px;
    }
  </style>

<script>
    Vue.createApp({
      data(){
        return{
          shop:[ 
            {
              name:'yq',
              price:50,
              num:0,
            },
            {
              name:'wyb',
              price:20,
              num:0,
            },
          ],
          back:'pink',
          // 添加显示隐藏
          addStatus:false,
          // 编辑显示隐藏
          editStatus:false,
          // 操作显示隐藏
          isActive:false,
          // 编辑
          ediArr:"",
          // 添加商品名字
          addName:"",
          // 添加商品价格
          addPrice:"",
          // 编辑
          editName:"",
          editNum:"",
          // 总价
          totalPrice:0,
          // 总数
          total:0,
        };
      },
      methods:{
        add(a,id){
          console.log(a);
          this.shop[id].num++;
          this.total++;
          this.totalPrice += a.price*this.shop[id].num
        },
        jian(a,id){
          this.shop[id].num--;
                this.total--;
                this.totalPrice = this.totalPrice - this.shop[id].price;
        },
        // 添加变状态
        addShopK(){
          console.log(1);
          this.addStatus=true;
        },
        closeAdd(){
          this.addStatus=false;
        },
        edit(a,id){
          console.log(a);
          this.ediArr = id;
          this.editName = this.shop[id].name
          this.editNum = this.shop[id].price
          this.editStatus = true;
        },
        // 编辑确定
        suerEdit(){
          this.editStatus = false;
          console.log(this.editName,this.editNum);
          console.log(this.ediArr);
          this.shop[this.ediArr].name = this.editName;
          this.shop[this.ediArr].price = this.editNum;
          this.editName = '';
          this.editNum = '';
        },
        // 取消
        closeEdit(){
          this.editStatus = false
        },
        // 添加商品保存
        sureAdd(){
          this.shop.push({
          name: this.addName,
          price:this.addPrice,
          num:0,  
          });
          this.addName = '';
          this.addPrice = '';
        },
        // 删除
        del(i){
          console.log(i);
          this.shop.splice(i,1);
        }
      }
    }).mount("#content")
  </script>