原理：

// 根据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返回到外面接受

});

实例：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

     <style>

         #app {

             width: 600px;

             margin: 10px auto;

         }

         .tb {

             border-collapse: collapse;

             width: 100%;

         }

         .tb th {

             background-color: #0094ff;

             color: white;

         }

         .tb td,

         .tb th {

             padding: 5px;

             border: 1px solid black;

             text-align: center;

         }

         .add {

             padding: 5px;

             border: 1px solid black;

             margin-bottom: 10px;

         }

     </style>

 </head>

 <body>

     <div id="app">

         <div class="add">

             编号: <input type="text" v-model="id">品牌名称: <input v-model="name" type="text">

             <button @click="add">添加</button>

         </div>

         <div class="add">品牌名称：<input type="text"></div>

         <div>

             <table class="tb">

                 <tr>

                     <th>编号</th>

                     <th>品牌名称</th>

                     <th>创立时间</th>

                     <th>操作</th>

                 </tr>

                 <tr v-if="list.length <= 0">

                     <td colspan="4">没有品牌数据</td>

                 </tr>

                 <!--加入: key="index" 时候必须把所有参数写完整  -->

                 <tr v-for="(item,key,index) in list" :key="index">

                     <td>{{item.id}}</td>

                     <td>{{item.name}}</td>

                     <td>{{item.ctime}}</td>

                     <!-- 使用vue来注册事件时，我们在dom元素中是看不到的 -->

                     <td><a href="javascript:void(0)" @click="del(item.id)">删除</a></td>

                 </tr>

             </table>

         </div>

     </div>

 </body>

 </html>

 <script src="vue2.4.4.js"></script>

 <script>

     var vm = new Vue({

         el: "#app",

         data: {

             id: 0,

             name: '',

             list: [

                 { "id": 1, "name": "it", "ctime": Date() },

                 { "id": 2, "name": "白龙", "ctime": Date() }

             ]

         },

         methods: {

             add: function () {

                 //将id和namepush到list数组中

                 this.list.push({ "id": this.id, "name": this.name, "ctime": Date() });

             },

             del:function(id) {

                 // 根据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返回到外面接受

                 });

                 // 根据下标在list集合中将对应的数据删除

                 // splice(开始删除的下标，删除的长度)

                 this.list.splice(index,1);

             }

         }

     });

 </script>

Vue--findIndex方法的使用原理的更多相关文章

  1. vue实现双向数据绑定的原理

    vue实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的. 在MDN上对该方法的说明是:O ...

  2. 转 vue实现双向数据绑定之原理及实现篇

    转自:https://www.cnblogs.com/canfoo/p/6891868.html vue的双向绑定原理及实现 前言 先上个成果图来吸引各位: 代码:                  ...

  3. 梳理vue双向绑定的实现原理

    Vue 采用数据劫持结合发布者-订阅者模式的方式来实现数据的响应式,通过Object.defineProperty来劫持数据的setter,getter,在数据变动时发布消息给订阅者,订阅者收到消息后 ...

  4. Vue数据绑定和响应式原理

    Vue数据绑定和响应式原理 当实例化一个Vue构造函数,会执行 Vue 的 init 方法,在 init 方法中主要执行三部分内容,一是初始化环境变量,而是处理 Vue 组件数据,三是解析挂载组件.以 ...

  5. vue我的总结+转原理

    我的总结 vue:1 mvvm模型,model,view,viewmodel,自底层向上,逐渐增加的模式2 .vue文件 包含html css js 有最近设计原则,将自己需要的放到最近,2 组件化 ...

  6. vue.nextTick()方法的使用详解

    什么是Vue.nextTick()??   定义:在下次 DOM 更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法,获取更新后的 DOM. 所以就衍生出了这个获取更新后的DOM的Vue方法 ...

  7. Vue双向绑定的实现原理系列（一）：Object.defineproperty

    了解Object.defineProperty() github源码 Object.defineProperty()方法直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象. ...

  8. Vue的双向数据绑定的原理

    Vue数据双向绑定的原理就是采用数据劫持结合发布者-订阅者模式,通过object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监 ...

  9. 【面试题】为什么有时用Vue.use()？及Vue.use()的作用及原理是什么？

    Vue.use()的作用及原理 点击打开视频讲解 在Vue中引入使用第三方库通常我们都会采用import的形式引入进来 但是有的组件在引入之后又做了Vue.use()操作 有的组件引入进来又进行了Vu ...

随机推荐

  1. 《DSP using MATLAB》Problem 8.22

    时光飞逝,亲朋会一个一个离我们远去,孤独漂泊一阵子后,我们自己也要离开, 代码: %% -------------------------------------------------------- ...

  2. 《DSP using MATLAB》Problem 8.18

    代码: %% ------------------------------------------------------------------------ %% Output Info about ...

  3. HBase Master-status

  4. walle(瓦力)部署系统的安装和简单使用

    Walle(瓦力):一套软件开发的部署系统.提供了清晰的日志记录,支持数据的回滚.用于解决大型团队在软件开发中的测试.预测试和上线的统一部署管理. 系统环境:CentOS6.8-A CentOS-6. ...

  5. Python中的sort()

    Python中的sort()方法用于数组排序,本文以实例形式对此加以详细说明: 一.基本形式列表有自己的sort方法,其对列表进行原址排序,既然是原址排序,那显然元组不可能拥有这种方法,因为元组是不可 ...

  6. md5密码入库

    <?php //连接数据库 $pdo = new PDO('mysql:host=localhost;dbname=md5;charset=UTF8', 'root', ''); # 设置为fa ...

  7. IIS发布web应用程序之再折腾

    最近几个月发布程序比较多,遇到了各种IIS发布web程序后无法访问的问题.原以为对各种问题都已经摸的差不多了,但今天又为一问题折腾了大半天.具体过程祥记如下: 在server2008 R2 64位系统 ...

  8. PAT甲级——A1033 To Fill or Not to Fill

    With highways available, driving a car from Hangzhou to any other city is easy. But since the tank c ...

  9. 修改maven本地库路径

    1.打开maven的安装路径:${M2_HOME}/conf/setings.xml文件 2.找到<localRepository>项,将它的值修改就可以了,我修改的是:${M2_HOME ...

  10. idea报错：Error：java不支持发行版本5的解决方法

    将以下对应配置一致即可. File-->Project Structure File-->Settings