vue中响应式的数组方法push() splice() shift() pop() unshift() sort() reverse()
文章目录在vue中哪些数组是响应式的呢?1、push方法2、pop() 方法用于删除并返回数组的最后一个元素。3、shift() 方法用于删除数组的第一个元素,并返回第一个元素的值4、unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度。5、splice() 方法向/从数组中删除元素/插入元素/替换元素,然后返回被删除/插入/替换的项目。6、sort() 方法用于对数组的元素进
·
文章目录
在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() 方法用于颠倒数组中元素的顺序
如有不正确的地方,欢迎指正,尊重原创!!!!
更多推荐
已为社区贡献1条内容
所有评论(0)