原理：

// 根据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. SpringBoot 05_集成SpringDataJpa

    你还在为项目的集成头疼吗?你还在为管理大量的配置文件烦恼吗?如果是,用SpringBoot吧!今天主要介绍如果在SpringBoot的基础上创建一个集成了SpringDataJpa的项目,至于Spri ...

  2. vue @scroll

    参考: https://blog.csdn.net/qq449736038/article/details/80769507

  3. MessageBox用法

    一 函数原型及参数 function MessageBox(hWnd: HWND; Text, Caption: PChar; Type: Word): Integer; hWnd:对话框父窗口句柄, ...

  4. 更新CM版本

    照着这个文章搭建的 https://blog.csdn.net/sinat_32176947/article/details/79597073 需要注意问题有 离线需要自己配置yum 地址base地址 ...

  5. 解决windows8.1的依赖

  6. 【核心核心】5.Spring【DI】注解方式

    使用注解的方式依赖注入不用提供set方法 1.普通类型的注解 @Value @Value(value="春天") private String name; 2.对象类型的注解 @A ...

  7. WPF 导出Excel 导出图片

    /// <summary> /// 导出Excel /// </summary> private void ExportExcel(DataTable ExcelDt) { / ...

  8. megacli在线raid构建详解(转载自用)

    版权声明:本文为博主原创文章,未经博主允许不得转载,转载附上原文链接即可. https://blog.csdn.net/GX_1_11_real/article/details/83213959 ht ...

  9. 用 vue 脚手架 vue-cli 初始化（新建）项目

    前提:已经安装 node.js 和 git 1.在需要创建的文件夹中,右击 -> Git  Bush Here ,然后输入命令 vue init webpack "文件名"( ...

  10. MySql存储过程批量给多个数据库中的同名表添加字段

    1 创建存储过程 batchAddField:给所有"MyDB_"开头的数据库添加新字段 -- ---------------------------- -- Procedure ...