vue3简单购物车

           * {
        padding: 0;
        margin: 0;
      }
      #shopping {
        width: 50%;
        height: 50px;
        border: 1px solid black;
        display: flex;
      }
      .shopping_inner {
        width: 25%;
        height: 100%;
        border: 1px solid black;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      #commodity div {
        width: 50%;
        height: 50px;
        border: 1px solid black;
        display: flex;
      }
      .shopping_inner button {
        width: 25%;
        height: 55%;
      }
      #num {
        width: 100%;
        height: 100px;
      }
      #add {
        width: 100%;
        height: 100px;
      }
      #add button {
        width: 100px;
        height: 60%;
      }
      #hide input {
        width: 45%;
        height: 100%;
      }
      #hide button {
        width: 10%;
        border: none;
        outline: none;
      }
      #delete_inner input {
        width: 45%;
        height: 100%;
      }
      #delete_inner button {
        width: 10%;
        border: none;
        outline: none;
      }

<div id="shopping">
      <div class="shopping_inner">
        <b>名称</b>
      </div>
      <div class="shopping_inner">
        <b>价格</b>
      </div>
      <div class="shopping_inner">
        <b>数量</b>
      </div>
      <div class="shopping_inner">
        <b>操作</b>
      </div>
    </div>
    <div id="commodity">
      <div v-for="(item,index) in array" class="border_inner" :style="{'background-color':(item.number!=0?'red':'white')}">
        <div class="shopping_inner">
          {{item.name}}
        </div>
        <div class="shopping_inner">
          {{item.Price}}
        </div>
        <div class="shopping_inner">
          <button class="but" @click="cut(index)" v-show="item.number>0">-</button>
          {{item.number}}
          <button @click="add(index)">+</button>
        </div>
        <div class="shopping_inner">
          <button @click="edit(index)">编辑</button>&nbsp;
          <button @click="dele(index)">删除</button>
        </div>
      </div>
      <div id="num">
        <div class="shopping_inner">
        </div>
        <div class="shopping_inner">
          <span>总价格:</span>
          {{price_inner}}
        </div>
        <div class="shopping_inner">
          <span>总数量:</span>
          {{number_inner}}
        </div>
        <div class="shopping_inner">
        </div>
      </div>
      <button @click="hid">添加商品</button>
      <div id="hide" v-show="hi" style="width: 50%;height: 30px;">
        <input type="text" v-model="name">
        <input type="text" v-model="Price">
        <button @click="add_edd">添加</button>
        <button @click="cancel">取消</button>
      </div>
      <div id="delete_inner" style="width: 50%;height: 30px;background-color: red;" v-show="nonets">
        <input type="text" v-model="inner_name">
        <input type="text" v-model="Price_inner">
        <button @click="con(index)">确认</button>
        <button @click="del">取消</button>
      </div>
    </div>

<script type="text/javascript">
      let arr = Vue.createApp({
        data() {
          return {
            array: [{
              name: '商品一',
              Price: 14,
              number: 0
            }, {
              name: '商品二',
              Price: 15,
              number: 0
            }, {
              name: '商品三',
              Price: 20,
              number: 0
            }],
            price_inner: '0',
            number_inner: '0',
            hi: false,
            nonets: false,
            inde_inner: '0',
            Price_inner:'',
            inner_name:''
          };
        },
        methods: {
          // 加
          add(i) {
            arr.array[i].number++;
            arr.number_inner++;
            let arr_arr = 0;
            for (let p = 0; p < this.array.length; p++) {
              arr_arr += this.array[p].Price * this.array[p].number;
            }
            arr.price_inner = arr_arr;
            // console.log(arr_arr);
            if (this.array[i].number > 0) {
              this.array[i].backgroundColor = "rgba(255, 0, 0, 0.3)";
              console.log(i);
            }
          },
          // 减
          cut(p) {
            arr.array[p].number--;
            arr.number_inner--;
            let arr_arr = 0;
            for (let p = 0; p < this.array.length; p++) {
              arr_arr += this.array[p].Price * this.array[p].number
            }
            arr.price_inner = arr_arr;
            console.log(arr_arr);
          },
          hid() {
            this.hi = true;
          },
          // 添加
          add_edd() {
            // console.log(this.name);
            if (this.name != undefined && this.Price != undefined && this.name != '' && this.Price != '') {
              this.array.unshift({
                name: this.name,
                Price: this.Price,
                number: 0,
              })
              this.name = '';
              this.Price = '';
              this.hi = false;
            } else {
              alert('请输入商品');
              this.name = '';
              this.Price = '';
              this.hi = false;
            }
          },
          cancel() {
            this.name = '';
            this.Price = '';
            this.hi = false;
          },
          // 删除
          dele(a) {
            console.log(a);
            this.array.splice(a, 1)
            console.log(this.array);
            let arr_arr = 0;
            let arr_num = 0;
            for (let p = 0; p < this.array.length; p++) {
              arr_arr += this.array[p].Price * this.array[p].number;
              arr_num += this.array[p].number;
            }
            arr.price_inner = arr_arr;
            arr.number_inner = arr_num;
            console.log(arr_arr);
            console.log(arr_num);
            this.nonets = false;
          },
          // 编辑
          edit(a) {
            console.log(this.array[a]);
            this.nonets = true;
            this.inner_name = this.array[a].name;
            this.Price_inner = this.array[a].Price;
            this.inde_inner = a;
          },
          del() {
            this.nonets = false;
          },
          // 编辑确认
          con() {
            // console.log(this.inde_inner);
            this.array[this.inde_inner].name = this.inner_name;
            this.array[this.inde_inner].Price = this.Price_inner;
            this.nonets = false;
            let arr_arr = 0;
            let arr_num = 0;
            // for (let p = 0; p < this.array.length; p++) {
            //  arr_arr += this.array[p].Price * this.array[p].number;
            //  arr_num += this.array[p].number;
            // }
            for (let k in this.array) {
              console.log(this.array[k]);
                arr_arr += this.array[k].Price * this.array[k].number;
                arr_num += this.array[k].number;
            }
            arr.price_inner = arr_arr;
            arr.number_inner = arr_num;
            console.log(arr_arr);
            console.log(arr_num);
          }
        }
      }).mount('#commodity')
    </script>