js中删除元素出现错误

最新推荐文章于 2023-04-08 10:25:24 发布

我可以征服世界

最新推荐文章于 2023-04-08 10:25:24 发布

阅读量381

点赞数

文章标签： javascript vue.js html

本文链接：https://blog.csdn.net/qq_37771631/article/details/115911407

版权

Splice()方法用于添加或删除数组中的元素

这种方法会出现副作用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box span{
            line-height:2;

        }
    </style>
    
</head>
<body>
    <div id="app">
        <div class='box' v-for='(item,key) in arr' :key=key>
            <span>{{item['id']}}</span>
            <span>{{item['name']}}</span>
            <span>{{item['sex']}}</span>
            <button @click='deleteEle(item)'>点击删除元素</button>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
    let arr = [
        {id:0,name:'Tom',sex:0},
        {id:1,name:'Jerry',sex:1},
        {id:2,name:'Danny',sex:1},
        {id:3,name:'Jenny',sex:0},
        {id:4,name:'Lee',sex:0},
        {id:5,name:'Bob',sex:1},
        {id:6,name:'John',sex:0},
        {id:7,name:'Marry',sex:1}
    ];

    const app = new Vue({
        el:"#app",
        data:{
            arr
        },
        methods:{
            deleteEle(item){
                // 执行删除元素的操作
                this.arr.splice(item['id'],1);
            }
        }
    })
</script>
</body>
</html>

点击按钮删除元素，第一次点击没有问题，一旦删除元素，此方法就会改变原来数据的位置，导致误删

解决方法：采用倒序循环删除方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box span{
            line-height:2;
            
            

        }
    </style>
    
</head>
<body>
    <div id="app">
        <div class='box' v-for='(item,key) in arr' :key=key>
            <span>{{item['id']}}</span>
            <span>{{item['name']}}</span>
            <span>{{item['sex']}}</span>
            <button @click='deleteEle(item)'>点击删除元素</button>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
    let arr = [
        {id:0,name:'Tom',sex:0},
        {id:1,name:'Jerry',sex:1},
        {id:2,name:'Danny',sex:1},
        {id:3,name:'Jenny',sex:0},
        {id:4,name:'Lee',sex:0},
        {id:5,name:'Bob',sex:1},
        {id:6,name:'John',sex:0},
        {id:7,name:'Marry',sex:1}
    ];

    const app = new Vue({
        el:"#app",
        data:{
            arr
        },
        methods:{
            deleteEle(item){
                // 倒序循环删除方法
                for(let i=this.arr.length-1;i>=0;i--){
                    if(this.arr[i]['id'] === item['id']){
                        this.arr.splice(i,1);
                    }
                }

            }
        }
    })
</script>
</body>
</html>

我可以征服世界

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
js中删除元素出现错误

Splice()方法用于添加或删除数组中的元素这种方法会出现副作用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .box span{ line-height:2; } </sty...
复制链接

扫一扫