遇见 vue.js --------阿文的vue.js学习笔记（8 — 2）------列表渲染-----数组及对象更新检测

最新推荐文章于 2020-10-12 11:37:34 发布

你的阿wen

最新推荐文章于 2020-10-12 11:37:34 发布

阅读量4.3k

点赞数 37

文章标签： vue

本文链接：https://blog.csdn.net/qq_45948983/article/details/108939079

版权

**
新学习新征程，我们一起踏上学习 vue.js的新长征

… … …

关注我，我们一起学习进步。

当我们的代码运行成功渲染进了我们的页面之后，我们的vue也提供了一套方法来对已经渲染的数组来进行修改（Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。）：

我们可以打开控制台，然后对例子的 dotos 数组尝试调用变更方法。比如 example1.dotos.push({ message: ‘Baz’ })。

下面来简单示例一下上面的代码：
在这里插入图片描述
首先看这里是一段代码的执行结果，创建了一个有三项的数组

示例：你可以看到当该语句回车执行之后，我们页面中的数组马上被添加了一个新的数据
在这里插入图片描述

示例：你可以发现当我们在控制台中输入该语句执行之后，页面中最后排的数据被直接删除了
在这里插入图片描述

示例：你可以发现当命令执行之后，我们页面中被渲染的数组中的第一个数据被删除
在这里插入图片描述

示例：你可以发现当我们的命令执行之后，我们页面中的第一个被渲染了新的数据
在这里插入图片描述

示例：splice（1，2）是删除该数组中起始位置为索引1，然后长度为的2 的2个单位
在这里插入图片描述

当然，他还可以用来做替换和添加

反转之前的文章有写过reverse 的例子，可以查阅遇见 vue.js --------阿文的vue.js学习笔记（4）------模板语法在写过滤器的时候有写到过。

首先我们先创建一个对象，然后渲染进页面
在这里插入图片描述

语法： Vue.set(vm.对象名，“新属性名”，“属性”)

示例： 添加一个宠物的属性
在这里插入图片描述

语法： Vue.delete(vm.对象名，“要删的属性名”)

示例： 删除一个 name 的属性
在这里插入图片描述

**
关注校园君有话说公众号，回复 web前端免费领取50G 前端学习资料一份，我们一起学习进步吧。
在这里插入图片描述
**

关注