Vue综合实例——数组相关知识(1)

实例中用到的只是;
1.自定义指令,计算属性,侦听器
2.生命周期

实现的效果如下图:
在这里插入图片描述
本实例最核心的业务逻辑是数据处理,列表的话会用到数组,vue对数组的处理有一些特殊的地方,现在来简单介绍一下。
数组相关API

  1. 变异方法(修改原有的数组)
  • splice() 删除数组中指定的元素
  • sort() 排序
  • reverse() 数组元素的反转

在这里插入图片描述
数组变异方法

  • 在 Vue 中,直接修改对象属性的值无法触发响应式。当你直接修改了对象属性的值,你会发现,只有数据改了,但是页面内容并没有改变
  • 变异数组方法即保持数组方法原有功能不变的前提下对其进行功能拓展
push() 往数组最后面添加一个元素,成功返回当前数组的长度
pop() 删除数组的最后一个元素,成功返回删除元素的值
shift() 删除数组的第一个元素,成功返回删除元素的值
unshift() 往数组最前面添加一个元素,成功返回当前数组的长度
splice() 有三个参数,第一个是想要删除的元素的下标(必选),第二个是想要删除的个数(必选),第三个是删除 后想要在原位置替换的值
sort() sort() 使数组按照字符编码默认从小到大排序,成功返回排序后的数组
reverse() reverse() 将数组倒序,成功返回倒序后的数组

替换数组

  • 不会改变原始数组,但总是返回一个新数组
filter filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
concat concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组
slice slice() 方法可从已有的数组中返回选定的元素。该方法并不会修改数组,而是返回一个子数组

vue对于数据的处理都是响应式的,数组的情况默认情况下并不是默认的,所以vue要把数组对数据的处理变成响应式,这样的话,操作数组,页面中的数据就会一起变化。变异方法就体现在这个层面,将原生API 处理为响应式。

  1. 替换数组(生成新的数组)
  • filter()
  • concat()
  • slice()

变更方法,会变更调用了这些方法的原始数组。相比之下,也有非变更方法,例如 filter()、concat() 和 slice()。它不会变更原始数组,而总是返回一个新数组。当使用非变更方法时,可以用新数组替换旧数组。需要重新赋值!
在这里插入图片描述

添加:
在这里插入图片描述
删除:
在这里插入图片描述
替换:
在这里插入图片描述

<!DOCTYPE html>
<html lang=
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值