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

实例:

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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值