添加，比如添加一本书，如果不输入订单号是不能进行添加，不写直接提交的话会有提示框提示填写订单号， 如图： 如果输入订单号就可以，如图： 现在我们添加一个完整的信息， 删除现在来删除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>