zoukankan      html  css  js  c++  java
  • Vue--findIndex方法的使用原理

    原理:

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

    实例:

      1 <!DOCTYPE html>
      2 <html lang="en">
      3 
      4 <head>
      5     <meta charset="UTF-8">
      6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
      7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
      8     <title>Document</title>
      9     <style>
     10         #app {
     11              600px;
     12             margin: 10px auto;
     13         }
     14 
     15         .tb {
     16             border-collapse: collapse;
     17              100%;
     18         }
     19 
     20         .tb th {
     21             background-color: #0094ff;
     22             color: white;
     23         }
     24 
     25         .tb td,
     26         .tb th {
     27             padding: 5px;
     28             border: 1px solid black;
     29             text-align: center;
     30         }
     31 
     32         .add {
     33             padding: 5px;
     34             border: 1px solid black;
     35             margin-bottom: 10px;
     36         }
     37     </style>
     38 </head>
     39 
     40 <body>
     41     <div id="app">
     42         <div class="add">
     43             编号: <input type="text" v-model="id">品牌名称: <input v-model="name" type="text">
     44             <button @click="add">添加</button>
     45         </div>
     46         <div class="add">品牌名称:<input type="text"></div>
     47         <div>
     48             <table class="tb">
     49                 <tr>
     50                     <th>编号</th>
     51                     <th>品牌名称</th>
     52                     <th>创立时间</th>
     53                     <th>操作</th>
     54                 </tr>
     55                 <tr v-if="list.length <= 0">
     56                     <td colspan="4">没有品牌数据</td>
     57                 </tr>
     58                 <!--加入: key="index" 时候必须把所有参数写完整  -->
     59                 <tr v-for="(item,key,index) in list" :key="index">
     60                     <td>{{item.id}}</td>
     61                     <td>{{item.name}}</td>
     62                     <td>{{item.ctime}}</td>
     63                     <!-- 使用vue来注册事件时,我们在dom元素中是看不到的 -->
     64                     <td><a href="javascript:void(0)" @click="del(item.id)">删除</a></td>
     65                 </tr>
     66             </table>
     67         </div>
     68 
     69     </div>
     70 </body>
     71 
     72 </html>
     73 <script src="vue2.4.4.js"></script>
     74 <script>
     75     var vm = new Vue({
     76         el: "#app",
     77         data: {
     78             id: 0,
     79             name: '',
     80             list: [
     81                 { "id": 1, "name": "it", "ctime": Date() },
     82                 { "id": 2, "name": "白龙", "ctime": Date() }
     83             ]
     84         },
     85         methods: {
     86             add: function () {
     87                 //将id和namepush到list数组中
     88                 this.list.push({ "id": this.id, "name": this.name, "ctime": Date() });
     89             },
     90             del:function(id) {
     91                
     92                 // 根据id得到下标
     93                 // 默认去遍历list集合,将集合中的每个元素传入到function的item里,
     94                 var index = this.list.findIndex(function(item){
     95                         //根据item中的id属性来判断这个item是否是上面id中
     96                         //对应的数据,如果是返回一个true ,否返回false,继续下面的一条数据的遍历,以此类推
     97                       return item.id ==id; //如果返回true,那么findIndex方法会将这个item对应的id返回到外面接受
     98                 });
     99                 // 根据下标在list集合中将对应的数据删除 
    100                 // splice(开始删除的下标,删除的长度)               
    101                 this.list.splice(index,1);    
    102             }
    103         }
    104     });
    105 
    106 </script>
  • 相关阅读:
    size_type、size_t、differentce_type以及ptrdiff_t
    题目1003:A+B ---c_str(),atoi()函数的使用;remove , erase函数的使用
    字符串中符号的替换---replace的用法
    A+B for Matrices 及 C++ transform的用法
    97.5%准确率的深度学习中文分词(字嵌入+Bi-LSTM+CRF)
    详细解读简单的lstm的实例
    如何使用 Pylint 来规范 Python 代码风格
    Python下Json和Msgpack序列化比较
    除了cPickle,cjson外还有没有更高效点的序列化库了
    python对象序列化或持久化的方法
  • 原文地址:https://www.cnblogs.com/TigerZhang-home/p/8962238.html
Copyright © 2011-2022 走看看