Vue的删除数组函数

 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>

Vue.js 是一个流行的前端JavaScript框架,它允许开发者创建响应式的用户界面。在Vue中创建数组通常遵循JavaScript数组创建方式,但需要注意,Vue提供了一些特殊的方法来处理数组,以确保在数组更新后,视图能够正确响应变化。以下是创建数组的几种方式: 1. 直接初始化:你可以直接使用数组字面量的方式创建一个新的数组。 ```javascript let newArray = []; ``` 2. 使用构造函数Vue推荐使用`Array`构造函数来创建数组,这样Vue能够检测到数组的变化并更新视图。 ```javascript let newArray = new Array(); ``` 3. 使用Vue.set(针对对象属性)或Vue.delete(针对对象或数组元素):当需要添加或删除数组元素,并希望触发视图更新时,应该使用这些方法。 ```javascript // 添加元素 Vue.set(this.$data.array, index, value); this.$data.array.splice(index, 0, value); // 删除元素 Vue.delete(this.$data.array, index); this.$data.array.splice(index, 1); ``` 4. 使用Vue的响应式方法:在Vue实例的data选项中定义数组Vue会自动将这些数组变为响应式的。 ```javascript var vm = new Vue({ el: '#app', data: { items: [] } }); ``` 5. 使用ES6语法创建数组Vue也支持使用ES6的新特性,如扩展运算符(...),来创建数组。 ```javascript let newArray = [...existingArray]; ``` 在处理Vue中的数组时,需要注意的是,直接通过索引设置一个项或者修改数组的长度可能不会触发更新。在这种情况下,应该使用Vue提供的特殊方法,如`Vue.set`、`Vue.delete`或者使用数组的变异方法(如`push`, `pop`, `shift`, `unshift`, `splice`, `sort`, `reverse`)。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值