入门客AI创业平台(我带你入门,你带我飞行)
博文笔记

Vue数组操作

创建时间:2017-09-03 投稿人: 浏览次数:119

原文地址:http://blog.csdn.net/qq_24849765/article/details/52336963

vue中数组的操作总结: 
一、根据索引设置元素: 
1、调用$set方法:

this.arr.$set(index, val);
  • 1
  • 1

2、调用splice方法:

this.arr.splice(index, 1, val);
  • 1
  • 1

二、合并数组:

this.arr = this.arr.concat(anotherArr);
  • 1
  • 1

三、清空数组:

this.arr = [];
  • 1
  • 1

四、主要的数组方法: 
1、变异方法(修改了原始数组),vue为触发视图更新,包装了以下变异方法:

push()
pop()
shift()
unshift()
splice()  //无论何时,使用该方法删除元素时注意数组长度有变化,bug可能就是因为她
sort()
reverse()
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

2、非变异方法(不会修改原始数组而是返回一个新数组),如concat()、filter(),使用时直接用新数组替换旧数组,如上面的合并数组例子。

五、注意:

//以下操作均无法触发视图更新
this.arr[index] = val;
this.arr.length = 2;  
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3

详细了解请参考vue官方文档数组变动检测


声明:该文观点仅代表作者本人,入门客AI创业平台信息发布平台仅提供信息存储空间服务,如有疑问请联系rumenke@qq.com。