在“超市管理系统”上用vue来实现商品的增删改

整个页面排版改了一下

添加，比如添加一本书，如果不输入订单号是不能进行添加，不写直接提交的话会有提示框提示填写订单号，
如图：

如果输入订单号就可以，如图：

现在我们添加一个完整的信息，

删除现在来删除js那本书，点击删除，xiu~没了

修改修改的话，这里设置了弹层，给“弹层”div设置了v-if指令，给“修改”绑定事件，比如我们把上面的less改为js,点击修改会获取该信息进弹层
修改确认

vue代码复制过来很乱，之前没有

  <script>   const talble = new Vue({    
   el:'.container', 
   data:{       
   layer:false,//修改弹窗的显示   
   /* 属性比较多时，放在对象里面，容易管理 */   
   obj:{    
      title:'',      
      product:'',     
      sum:'',     
      price:'',    
      allPrice:'',  
                 }, 
    items: [{ title: '12345', product:'卡通抱枕',sum:'4',price:'5',allPrice:'20',id:1}],
          editItems:{//编辑的数据
      }     },  
   methods: {    
      add(){//添加数据     
         //必填，不填订单号的话就不添加    
             if(this.obj.title){     
                   var _id = Math.max(...this.items.map(v=>v.id))+1;//id的最大值加一               						  this.items.push({     
                         title: this.obj.title,       
                              product:this.obj.product,     
                                     sum:this.obj.sum,      
                                           price:this.obj.price,     
                                                  allPrice:this.obj.allPrice,     
                                                         id:_id        })            }  
                                                             else{        alert('请输入订单号')      }       /* 输入新增内容后，相对应的input标签里的内容清空 */      
                             this.obj = {}       },   
                   del(i){//删除       
                    this.items.splice(i,1)       },     
                      edit(item){//获取弹窗信息    
                          this.layer = true;    
                              this.editItems = {//深浅拷贝的问题      
                                  title:item.title,  
                                          product:item.product,   
                                                 sum:item.sum,     
                                                      price:item.price,     
                                                           allPrice:item.allPrice,    
                                                                 id:item.id        }
       },       update(){//更新数据       
        //循环遍历当前所有值，以便知道是修改哪个     
           for(var i = 0 ; i < this.items.length; i++){      
               /* 判断items的title是不是和editItems里的一样 */         
                if(this.items[i].id == this.editItems.id ){       
                     this.items[i] = this.editItems;       
                          this.layer = false;          }        }
       }     },   })  </script>