Vue--findIndex方法的使用原理

原理:

// 根据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>
原文地址:https://www.cnblogs.com/TigerZhang-home/p/8962238.html