浅析vue.js数组的变异方法
前端之家收集整理的这篇文章主要介绍了
浅析vue.js数组的变异方法，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下：
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
都有什么功能？动手试验了一下：
push
方法：
功能" @click="methodByPush">
pop
方法：
功能" @click="methodByPop">
shift
方法：
功能" @click="methodByShift">
unshift
方法：
功能" @click="methodByUnshift">
splice
方法：
功能" @click="methodBySplice">
sort
方法：
功能" @click="methodBySort">
reverse
方法：
功能" @click="methodByReverse">
result
显示的地方：
var vm = new Vue({
el: '#app',data: {
items: [],text: '',result: ''
},methods: {
methodByPush: function () {
this.result = this.items.push(this.text)
this.text = ''
},methodByPop: function () {
this.result = ''
this.result = this.items.pop()
},methodByShift: function () {
this.result = ''
this.result = this.items.shift()
},methodByUnshift: function () {
this.result = ''
this.result = this.items.unshift(this.text)
this.text = ''
},methodBySplice: function () {
this.result = ''
this.result = this.items.splice(2,1,'yovan')
},methodBySort: function () {
this.result = ''
this.result = this.items.sort()
},methodByReverse: function () {
this.result = ''
this.result = this.items.reverse()
alert(this.result)
}
}
})
得到下面的结论：
push() 往数组最后面添加一个元素，成功返回当前数组的长度
pop() 删除数组的最后一个元素，成功返回删除元素的值
shift() 删除数组的第一个元素，成功返回删除元素的值
unshift() 往数组最前面添加一个元素，成功返回当前数组的长度
splice() 有三个参数，第一个是想要删除的元素的下标（必选），第二个是想要删除的个数（必选），第三个是删除
后想要在原位置替换的值（可选）
sort() 使数组按照字符编码默认从小到大排序,成功返回排序后的数组
reverse() 将数组倒序，成功返回倒序后的数组
后来发现这些应该都是javascript本来的方法吧？以前javascript没学好，正好趁这次把这些方法的用法都给捡回来！
原文链接：https://www.f2er.com/vue/31736.html
