Vue的删除数组函数

最新推荐文章于 2024-04-02 04:25:52 发布

X-Rich

最新推荐文章于 2024-04-02 04:25:52 发布

阅读量308

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_64156125/article/details/128937067

版权

 del(item) {
                for (let i = 0; i < this.arr.length; i++) {
                    if (this.arr[i] == item) {
                        this.arr.splice(i, 1)
                    }
                }
                console.log(this.arr)
            },

例子：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <ul>
            <li v-for="(item) in arr">
                姓名：{{ item.name }} - 年龄：{{ item.age }}
                <button @click="del(item)">删除</button>
            </li>
        </ul>
    </div>
</body>
<script src="./vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data() {
            return {
                arr: [
                    {
                        name: '高启强',
                        age: 20
                    },
                    {
                        name: '高启盛',
                        age: 20
                    },
                    {
                        name: '安欣',
                        age: 20
                    },
                    {
                        name: '李响',
                        age: 20
                    }
                ]
            }
        },
        methods: {
            del(item) {
                for (let i = 0; i < this.arr.length; i++) {
                    if (this.arr[i] == item) {      //如果键值一致，就删除
                        this.arr.splice(i, 1)
                    }
                }
                console.log(this.arr)
            },
        }
    })
</script>

</html>