原理：
// 根据id得到下标 // 默认去遍历list集合，将集合中的每个元素传入到function的item里， var index = this.list.findIndex(function(item){ //根据item中的id属性来判断这个item是否是上面id中 //对应的数据，如果是返回一个true ,否返回false,继续下面的一条数据的遍历，以此类推 return item.id ==id; //如果返回true，那么findIndex方法会将这个item对应的id返回到外面接受 });
实例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <style> 10 #app { 11 600px; 12 margin: 10px auto; 13 } 14 15 .tb { 16 border-collapse: collapse; 17 100%; 18 } 19 20 .tb th { 21 background-color: #0094ff; 22 color: white; 23 } 24 25 .tb td, 26 .tb th { 27 padding: 5px; 28 border: 1px solid black; 29 text-align: center; 30 } 31 32 .add { 33 padding: 5px; 34 border: 1px solid black; 35 margin-bottom: 10px; 36 } 37 </style> 38 </head> 39 40 <body> 41 <div id="app"> 42 <div class="add"> 43 编号: <input type="text" v-model="id">品牌名称: <input v-model="name" type="text"> 44 <button @click="add">添加</button> 45 </div> 46 <div class="add">品牌名称：<input type="text"></div> 47 <div> 48 <table class="tb"> 49 <tr> 50 <th>编号</th> 51 <th>品牌名称</th> 52 <th>创立时间</th> 53 <th>操作</th> 54 </tr> 55 <tr v-if="list.length <= 0"> 56 <td colspan="4">没有品牌数据</td> 57 </tr> 58 <!--加入: key="index" 时候必须把所有参数写完整 --> 59 <tr v-for="(item,key,index) in list" :key="index"> 60 <td>{{item.id}}</td> 61 <td>{{item.name}}</td> 62 <td>{{item.ctime}}</td> 63 <!-- 使用vue来注册事件时，我们在dom元素中是看不到的 --> 64 <td><a href="javascript:void(0)" @click="del(item.id)">删除</a></td> 65 </tr> 66 </table> 67 </div> 68 69 </div> 70 </body> 71 72 </html> 73 <script src="vue2.4.4.js"></script> 74 <script> 75 var vm = new Vue({ 76 el: "#app", 77 data: { 78 id: 0, 79 name: '', 80 list: [ 81 { "id": 1, "name": "it", "ctime": Date() }, 82 { "id": 2, "name": "白龙", "ctime": Date() } 83 ] 84 }, 85 methods: { 86 add: function () { 87 //将id和namepush到list数组中 88 this.list.push({ "id": this.id, "name": this.name, "ctime": Date() }); 89 }, 90 del:function(id) { 91 92 // 根据id得到下标 93 // 默认去遍历list集合，将集合中的每个元素传入到function的item里， 94 var index = this.list.findIndex(function(item){ 95 //根据item中的id属性来判断这个item是否是上面id中 96 //对应的数据，如果是返回一个true ,否返回false,继续下面的一条数据的遍历，以此类推 97 return item.id ==id; //如果返回true，那么findIndex方法会将这个item对应的id返回到外面接受 98 }); 99 // 根据下标在list集合中将对应的数据删除 100 // splice(开始删除的下标，删除的长度) 101 this.list.splice(index,1); 102 } 103 } 104 }); 105 106 </script>