Vue综合实例——数组相关知识（1）

最新推荐文章于 2023-02-23 16:32:34 发布

别影响我打怪

最新推荐文章于 2023-02-23 16:32:34 发布

阅读量368

点赞数

分类专栏： Vue 文章标签： vue javascript

本文链接：https://blog.csdn.net/weixin_43370373/article/details/118752641

版权

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

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

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

`push()`	往数组最后面添加一个元素，成功返回当前数组的长度
`pop()`	删除数组的最后一个元素，成功返回删除元素的值
`shift()`	删除数组的第一个元素，成功返回删除元素的值
`unshift()`	往数组最前面添加一个元素，成功返回当前数组的长度
`splice()`	有三个参数，第一个是想要删除的元素的下标（必选），第二个是想要删除的个数（必选），第三个是删除后想要在原位置替换的值
`sort()`	sort() 使数组按照字符编码默认从小到大排序,成功返回排序后的数组
`reverse()`	reverse() 将数组倒序，成功返回倒序后的数组

替换数组

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

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

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

添加：
在这里插入图片描述
删除：

替换：

<!DOCTYPE html>
<html lang=

关注

专栏目录