浅析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

猜你在找的Vue相关文章