Vue--findIndex方法的使用原理

最新推荐文章于 2022-11-17 22:42:44 发布

liyan882

最新推荐文章于 2022-11-17 22:42:44 发布

阅读量929

点赞数

分类专栏： vue学习文章标签： vue.js typescript javascript

本文链接：https://blog.csdn.net/u014077467/article/details/124779787

版权

vue学习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

原理：

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

实例：

Document

<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>