在vue中哪些数组是响应式的呢?

1、push方法

html代码

<div id="app">
        <ul>
            <li v-for="item in listArry">{{item}}</li>
        </ul>
        <button @click="btnClick">按钮</button>
    </div>

js代码

const app = new Vue({
        el: '#app',
        data: {
            // 定义一个数组
            listArry: ['a', 'b', 'c', 'd']
        },
        methods: {
            btnClick() {
                // 1、push
                this.listArry.push('e')
            }
        }
    })

定义的数组列表
在这里插入图片描述
push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。
在这里插入图片描述

2、pop() 方法用于删除并返回数组的最后一个元素。
const app = new Vue({
        el: '#app',
        data: {
            // 定义一个数组
            listArry: ['a', 'b', 'c', 'd']
        },
        methods: {
            btnClick() {
                // 2、pop
                this.listArry.pop()
            }
        }
    })
3、shift() 方法用于删除数组的第一个元素,并返回第一个元素的值
const app = new Vue({
        el: '#app',
        data: {
            // 定义一个数组
            listArry: ['a', 'b', 'c', 'd']
        },
        methods: {
            btnClick() {
                // 2、shift
                this.listArry.shift()
            }
        }
    })
4、unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度。
const app = new Vue({
        el: '#app',
        data: {
            // 定义一个数组
            listArry: ['a', 'b', 'c', 'd']
        },
        methods: {
            btnClick() {
                // 2、unshift
                 this.listArry.unshift('e')
            }
        }
    })
5、splice() 方法向/从数组中删除元素/插入元素/替换元素,然后返回被删除/插入/替换的项目。

5.1 、用于删除元素,第二个参数传要删除的个数,第二个参数不传,会从开始的位置把后面的全部删除。
5.2、用于替换元素, 第一个参数是开始的位置,第二个参数是要替换的个数,后面是要替换的内容
5.3、用于插入元素,第二个参数传0,后面跟上要插入的内容

删除

const app = new Vue({
        el: '#app',
        data: {
            // 定义一个数组
            listArry: ['a', 'b', 'c', 'd']
        },
        methods: {
            btnClick() {
                // 2、splice 从第一个元素开始,删除2个元素
                 this.listArry.splice(1,2)
            }
        }
    })

替换

this.listArry.splice(1,2,'x','y')

在这里插入图片描述
插入

this.listArry.splice(1,0,'x','y','z')

在这里插入图片描述

6、sort() 方法用于对数组的元素进行排序
7、reverse() 方法用于颠倒数组中元素的顺序

如有不正确的地方,欢迎指正,尊重原创!!!!

Logo

前往低代码交流专区

更多推荐