原理：

// 根据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. Delphi XE10百集视频教程计划

    1. 前言 本人现在的职业是Java程序员,一直想学习一个做桌面应用的编程语言,几年前无意中接触到Delphi,比VB功能强大,比C++语法更容易理解,加上Oracle的PL/SQL的底子,最终决定学 ...

  2. JS基础语法之DOM01(找标签、改属性样式）

    DOM:暂时可以理解为找标签.改样式 1.BOM:   记住location这个就可以: location.href 获得当前页面的URL location.href = "URL" ...

  3. python3-常用模块之序列化

    序列化 : 把其他的数据类型转换成 字符串或者bytes 序列 : 列表.元组.字符串.bytes 为什么要把其他数据类型转换成字符串? 能够在网络上传输的只能是bytes,能够存储在文件里的只有by ...

  4. vue:解决使用param传参后，再次刷新页面会新增一个原有的tab

    问题:在最近的项目中,我通过传递不同的参数,复用同一组件进行渲染,然而意外出现一个bug,就是当我重新刷新该页面时,会新增一个tab 原来的: 刷新页面后: 查阅资料后,发现该现象是由于通过param ...

  5. Django项目：CRM(客户关系管理系统)--74--64PerfectCRM实现CRM课程排名详情

    #urls.py """PerfectCRM URL Configuration The `urlpatterns` list routes URLs to views. ...

  6. LUOGU P3157 [CQOI2011]动态逆序对(CDQ 分治)

    传送门 解题思路 cdq分治,将位置看做一维,修改时间看做一维,权值看做一维,然后就转化成了三维偏序,用排序+cdq+树状数组.注意算删除贡献时要做两次cdq,分别算对前面和后面的贡献. #inclu ...

  7. anime.js 学习笔记

    官网演示/文档 anime.js 是一个简便的JS动画库,用法简单而且适用范围广,涵盖CSS,DOM,SVG还有JS的对象,各种带数值属性的东西都可以动起来. 实际演示和代码,官网写得很详细清楚了,这 ...

  8. 原 jeecms9自定义标签以及使用新创建的数据库表

    转载地址:https://blog.csdn.net/nice_meng/article/details/89179089 本系统使用的是jeecmsv9版本,收集网上知识后,进行个人汇总 首先,自己 ...

  9. CSS3属性transform详解【转载】

    CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)   在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾 ...

  10. iOS CALayer之CAEmitterLayer粒子发射器的神奇效果

    https://www.jianshu.com/p/c54ffd7412e7 想必以前QQ空间的点赞效果大家都知道吧,点赞之后按钮周围会有一圈爆裂的小圆点:还有微信的红包雨表情动画等,以及烟花,火焰效 ...