zoukankan      html  css  js  c++  java
  • Vue对List的删除和新增操作

     Vue对List的删除操作

    var vm = new vue({
        el: '#app'
        data: {
            id: ' ',
            name: ' ',
            list: [
                { id : 1, name : '奔驰', ctime: new Date() },
                { id : 2, name : '宝马', ctime: new Date() }
            ]
        },
        methods: { 
            delete(id) { //根据传入的ID来删除数据
                // 1.根据ID来找到要删除的这一项的索引
                // 2. 找到索引后,调用数组的splice方法
                // 方法一
                this.list.some((item, i) => {
                    if (item.id == id ){
                            this.list.splice(i,1)
                            // 在数组的some方法中,如果return true,就会立即终止这个数组的后续循环,所以相比较foreach,如果想要终止循环,那么建议使用some
                            return true;
                    }
                })
                // 方法二
                var index = this.list.findIndex(item => {
                    if ( item.id == id) {
                        return true;
                        }
            })
                this.list.splice(index,1)
            }
            // 方法三(不推荐,因为无法被终止)
            this.list.forEach(item => {
                if (item.id == id){
                    this.list.splice(i,1)
                }
            })
        }    
    })

    Vue对List的新增操作

    var car = { id : this.id, name: this.name}
        this.list.push(car)
    作者:Aleen Pan
    出处:http://panxiangfu.cnblogs.com/
    如果您觉得本文对您的学习有所帮助,可通过“微信”或“支付宝”打赏博主,或者点击页面右下角【好文要顶】支持博主。
  • 相关阅读:
    让你平步青云的10个谈话技巧
    瑞士心理学家和精神分析医师――荣格
    市场倍增理论
    淘宝网格,淘宝富人群
    波波的个人简历
    磁盘修复工具
    9种没结果的爱(未婚者必读)!!!
    网络投机市场
    网页数据抽取的方法介绍
    C#扩展方法试用
  • 原文地址:https://www.cnblogs.com/panxiangfu/p/12342603.html
Copyright © 2011-2022 走看看