原理：

// 根据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. day71test

    目录 练习: settings.py views.py: exception.py urls.py 练习: 视图类渲染,解析, 异常配置: 作业: 1..简单过过请求模块的源码流程,建立一个视图类,完 ...

  2. 【牛客挑战赛31D】 雷的打字机

    题目 首先看到这个出现长度至少为\(2\)的回文子串 这就等价于不能出现两个连续且相同的字符 于是我们用概率生成函数来搞 设\(g_i\)表示\(i\)次操作后游戏没有结束的概率,\(f_{i,j}\ ...

  3. elasticsearch river 从数据库中导入数据

    Elasticsearch中使用reiver-jdbc导入数据 2014-05-13 15:10 本站整理 浏览(3384)     Elasticsearch中使用reiver-jdbc导入数据,有 ...

  4. 【转载：java】详解java中的注解（Annotation）

    目录结构: contents structure [+] 什么是注解 为什么要使用注解 基本语法 4种基本元注解 重复注解 使用注解 运行时处理的注解 编译时处理的注解 1.什么是注解 用一个词就可以 ...

  5. Codeforces-348E Pilgrims

    #4342. CF348 Pilgrims 此题同UOJ#11 ydc的大树 Online Judge:Bzoj-4342,Codeforces-348E,Luogu-CF348E,Uoj-#11 L ...

  6. HZOI2019熟练剖分(tree)

    题目大意:https://www.cnblogs.com/Juve/articles/11186805.html 题解: 先给出官方题解: 其实这题跟期望没什么关系,因为E=$\sum_\limits ...

  7. C++对C的扩展、增强

    C++对C的扩展 1. 双冒号::作用域运算符 代码中对同一个变量多次声明,在代码块中使用时,局部变量会将全局变量隐藏.若在代码块使用变量前添加::,表示为全局变量. ::表示作用域运算符,如常见的s ...

  8. PAT甲级——A1062 Talent and Virtue

    About 900 years ago, a Chinese philosopher Sima Guang wrote a history book in which he talked about ...

  9. 微端 打包更新工具　as air 分享

    分享 微端,更新的是散包,不像端游,一个大包搞定. 更新须要每次用工具把资源的散文件.依据文件夹结构及时间 生成一个列表, 每次更新就是 文件夹及时间的比对! 该project能够翻译成 其它语言.有 ...

  10. 深入学习：Windows下Git新手教程（下）

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/huangyabin001/article/details/35840591 声明:因为本人对于Git ...