原理：

// 根据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. PAT甲级题目1-10(C++)

    1001 A+B Format(20分) Calculate a+b and output the sum in standard format -- that is, the digits must ...

  2. hibernate使用truncate清空表 截断表

    public void truncateTable(Session session, String tableNameInDb) { String sql = " truncate tabl ...

  3. org.apache.commons工具类方法解释 转

    在Java中,工具类定义了一组公共方法,这篇文章将介绍Java中使用最频繁及最通用的Java工具类.以下工具类.方法按使用流行度排名,参考数据来源于Github上随机选取的5万个开源项目源码. 一. ...

  4. 【流畅的python】16 - 协程

    yield 产生是产生值给调用方 让步是暂停生成器,同时让步也可以作为流程控制手段 yield item 上面这行代码会产出一个值.提供给next(...)的调用方.此外还会做出让步,暂停执行生成器, ...

  5. vue-cli 构建项目

    1.安装vue-cli和webpack npm install webpack -g npm install vue-cli -g 2.vue-cli初始化项目 vue init webpack-si ...

  6. java笔试之字符串反转

    写出一个程序,接受一个字符串,然后输出该字符串反转后的字符串. package test; import java.util.Scanner; public class exam04 { public ...

  7. linux使用wget

    wget is a Linux command-line utility for retrieving files from the web, via HTTP, HTTPS and FTP prot ...

  8. SpringBoot Controller接收参数的几种方式盘点

    本文不再更新,可能存在内容过时的情况,实时更新请移步我的新博客:SpringBoot Controller接收参数的几种方式盘点: SpringBoot Controller接收参数的几种常用方式盘点 ...

  9. leetcode 238 & leetcode 152 & leetcode 228

    lc238 Product of Array Except Self 遍历两次数组 用一个res[] 记录答案 1) 第一次,从左往右遍历 res[i] 记录0~i-1的乘积 2) 第二次,从右往左遍 ...

  10. QInotifyFileSystemWatcherEngine::addPaths: inotify_add_watch failed: 设备上没有空间

    解决办法: 添加最大监控文件数量 临时解决:(重启之后恢复) 命令设置:sudo sysctl fs.inotify.max_user_watches=524288 生效: sudo sysctl - ...