汽车系统实现--增加数据和删除数据
<div id="app"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">添加品牌</h3> </div> <div class="panel panel-body form-inline"> <label> Id:<input type="text" class="form-control" v-model="id"> </label>
<label> name:<input type="text" class="form-control" v-model="name"> </label>
<input type="button" value="添加" class="btn btn-primary" @click="add"> </div> </div>
<table class="table table-striped"> <thead> <tr> <th>Id</th> <th>Name</th> <th>Ctime</th> <th>Operation</th> </tr> </thead>
<tbody> <tr v-for="item in list" :key="item.id"> <td>{{ item.id }}</td> <td>{{ item.name }}</td> <td>{{ item.ctime }}</td> <td><a href="#" @click.prevent="del(item.id)">删除</a></td> </tr> </tbody> </table> </div>
扫码关注我们
微信号:SRE实战
拒绝背锅 运筹帷幄
SRE实战 互联网时代守护先锋,助力企业售后服务体系运筹帷幄!一键直达领取阿里云限量特价优惠。
<label> name:<input type="text" class="form-control" v-model="name"> </label>
<input type="button" value="添加" class="btn btn-primary" @click="add"> </div> </div>
<table class="table table-striped"> <thead> <tr> <th>Id</th> <th>Name</th> <th>Ctime</th> <th>Operation</th> </tr> </thead>
<tbody> <tr v-for="item in list" :key="item.id"> <td>{{ item.id }}</td> <td>{{ item.name }}</td> <td>{{ item.ctime }}</td> <td><a href="#" @click.prevent="del(item.id)">删除</a></td> </tr> </tbody> </table> </div>
1 <script> 2 var vm=new Vue({ 3 el:"#app", 4 data:{ 5 id:'', 6 name:'', 7 list:[ 8 {id:1,name:"宝马",ctime:new Date()}, 9 {id:2,name:"奔驰",ctime:new Date()}, 10 ] 11 }, 12 methods: { 13 add(){ //添加的方法 14 var car={ id:this.id, name:this.name, ctime:new Date()} 15 16 this.list.push(car); 17 18 // 当你输入后可以清空。不让他在此占位 19 // this.id=''; 20 // this.name=''; 21 this.id=this.name=''; 22 }, 23 del(id){ 24 // 如何根据id,删除该索引中的数据哦,---第一种方式 25 // this.list.some((item,i)=>{ 26 // if(item.id==id){ 27 // console.log(id) 28 // this.list.splice(i,1) 29 // // 在数组中some方法,如果return true,就会立刻终止这个数组的后续循环。 30 // return true; 31 // } 32 // }) 33 // 找到索引直接。直接调用数组的splice这个方法 34 35 36 // 快速的找到索引值----第而只能够放似 37 var index=this.list.findIndex(item=>{ 38 if(item.id==id){ 39 return true; 40 } 41 }); 42 // console.log(index); 43 this.list.splice(index,1); 44 45 } 46 }, 47 48 }) 49 </script>
更多精彩