首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >数组相关API

数组相关API

作者头像
星辰_大海
发布2020-12-07 11:25:47
4190
发布2020-12-07 11:25:47
举报
文章被收录于专栏:h5学习笔记h5学习笔记

1.数组变异方法(修改原有数据)

  • 在 Vue 中,直接修改对象属性的值无法触发响应式。当你直接修改了对象属性的值,你会发现,只有数据改了,但是页面内容并没有改变
  • 变异数组方法即保持数组方法原有功能不变的前提下对其进行功能拓展

push()

往数组最后面添加一个元素,成功返回当前数组的长度

pop()

删除数组的最后一个元素,成功返回删除元素的值

shift()

删除数组的第一个元素,成功返回删除元素的值

unshift()

往数组最前面添加一个元素,成功返回当前数组的长度

splice()

有三个参数,第一个是想要删除的元素的下标(必选),第二个是想要删除的个数(必选),第三个是删除 后想要在原位置替换的值

sort()

sort() 使数组按照字符编码默认从小到大排序,成功返回排序后的数组

reverse()

reverse() 将数组倒序,成功返回倒序后的数组

2.替换数组(生成新的数组)

  • 不会改变原始数组,但总是返回一个新数组

filter

filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。

concat

concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组

slice

slice() 方法可从已有的数组中返回选定的元素。该方法并不会修改数组,而是返回一个子数组

3.动态数组响应式数据

让 触发视图重新更新一遍,数据动态起来

  • Vue.set(vm.items, indexOfItem, newValue)

Vue通过实例对象调用的方法要加上$符号

  • vm.$set(vm.items, indexOfItem, newValue)

① 参数一表示要处理的数组名称 (或对象名称)

② 参数二表示要处理的数组的索引 (或对象属性)

③ 参数三表示处理后的值(或属性值)

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2020-12-02 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1.数组变异方法(修改原有数据)
  • 2.替换数组(生成新的数组)
  • 3.动态数组响应式数据
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档