Vue2实现购物车功能（拿来即用）

  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

 <div id="shopping">
        <table border="10">
            <thead>
                <tr >
                    <th>id</th>
                    <th>类型</th>
                    <th>价格</th>
                    <th>数量</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,index) in list" :style="item.color">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>￥{{item.price}}</td>
                    <td><button @click="reduce(index)" v-show="list[index].count!=0">-</button>&nbsp&nbsp&nbsp{{item.count}}&nbsp&nbsp&nbsp<button @click="add(index)">+</button></td>
                    <td><button @click="edit(index)">编辑</button>
            <button @click="colse(index)">删除</button>
                    </td>
                </tr>
                <tr>
          <td></td>
                    <td></td>
          <td>总价:￥{{prices}}</td>
          <td>总数：{{counts}}</td>
          <td></td>
        </tr>
            </tbody>
        </table>
        <button @click="add_prod()" v-show="add_status==true">添加商品</button>
        <div v-show="but_status== true">
            衬衣序号：<input type="number" v-model="inp_id">
            衬衣品牌：<input type="text"  v-model="inp_name">
            衬衣价格：<input type="number" v-model="inp_price">
            &nbsp; &nbsp;<button @click="product()">添加</button>&nbsp;<button @click="add_hide()">取消</button>
        </div>
        <div v-show="edit_status== true" >
            衬衣序号：<input type="number" v-model="inp_id">
            衬衣品牌:<input type="text" v-model="inp_name">
            衬衣价格:<input type="number" v-model="inp_price">
            &nbsp; &nbsp;<button @click="send_edit()">确认编辑</button>&nbsp;<button @click="edit_hide()">取消</button>
        </div>
    </div>
    <script>
       Vue.createApp({
            data(){
                return {
                    add_status:true,
                    but_status:false,
                    edit_status:false,
                    inp_id: "",
          inp_name: "",
                    inp_price:"",
                    counts:0,
                    prices:0,
                    list: [{
            id: "1",
            name: "菠萝牌",
            price: "18",
                        count:0,
                        color: {
              background: ""
            },
          }, {
            id: "2",
            name: "香蕉牌",
            price: "699",
                        count:0,
                        color: {
              background: ""
            },
          }, {
            id: "3",
            name: "榴莲牌",
            price: "8",
                        count:0,
                        color: {
              background: ""
            },
          }]
                }
            },
            methods: {
        add(index) {
            this.list[index].count++;
                    if (this.list[index].count > 0) {
                        console.log(this.list[index]);
            this.list[index].color.background = "#DFE7E7";
          }
                    let nam = 0;
                    for (let i = 0; i < this.list.length; i++) {
              nam += this.list[i].count;
            };
                    this.counts = nam;
                    let pri = 0;
                    for (let i = 0; i < this.list.length; i++) {
                        pri += this.list[i].price * this.list[i].count;
            };
                    this.prices = pri;
                },
                reduce(index){
                    this.list[index].count--;
                    if (this.list[index].count == 0) {
                        console.log(this.list[index]);
            this.list[index].color.background = "";
          }
                    let nam = 0;
                    for (let i = 0; i < this.list.length; i++) {
              nam += this.list[i].count;
            };
                    this.counts = nam;
                    let pri = 0;
                    for (let i = 0; i < this.list.length; i++) {
                        pri += this.list[i].price * this.list[i].count;
            };
                    this.prices = pri;
                },
                add_prod(){
                    this.add_status = false;
                    this.but_status = true;
                },
                add_hide(){
                    this.but_status = false;
                    this.add_status = true;
                },
                edit(index){
                    console.log(index);
                    this.but_status = false;
                    this.edit_status=true;
                    this.add_status = false;
                    this.inp_id=this.list[index].id;
                    this.inp_name=this.list[index].name;
                    this.inp_price=this.list[index].price;
                    sessionStorage.setItem("index",index)
                },
                edit_hide(){
                    this.edit_status=false;
                    this.add_status = true; 
                    this.inp_id="";
                    this.inp_name="";
                    this.inp_price="";
                },
                product(){
                    this.list.push({
                        id:this.inp_id,
                        name:this.inp_name,
                        price:this.inp_price,
                        count:"0",
                        color: {
              background: ""
            },
                    })
                    this.but_status = false;
                    this.add_status = true;
                    this.inp_id="";
                    this.inp_name="";
                    this.inp_price="";
                },
                colse(index){
                    this.list.splice(index, 1);
                    let nam = 0;
                    for (let i = 0; i < this.list.length; i++) {
              nam += this.list[i].count;
            };
                    this.counts = nam;
                    let pri = 0;
                    for (let i = 0; i < this.list.length; i++) {
                        pri += this.list[i].price * this.list[i].count;
            };
                    this.prices = pri;
                },
                send_edit(){
                   let index = sessionStorage.getItem("index")
                    this.list[index].id=this.inp_id;
                    this.list[index].name=this.inp_name;
                    this.list[index].price=this.inp_price;
                    this.edit_status=false;
                    this.add_status = true; 
                    this.inp_id="";
                    this.inp_name="";
                    this.inp_price="";
                    let nam = 0;
                    for (let i = 0; i < this.list.length; i++) {
              nam += this.list[i].count;
            };
                    this.counts = nam;
                    let pri = 0;
                    for (let i = 0; i < this.list.length; i++) {
                        pri += this.list[i].price * this.list[i].count;
            };
                    this.prices = pri;
                },
            },
        }).mount('#shopping')
    </script>