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

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

遇见 vue.js --------阿文的vue.js学习笔记(1)-----初识vue.js

遇见 vue.js --------阿文的vue.js学习笔记(2—1)----- 基本使用 [1]

遇见 vue.js --------阿文的vue.js学习笔记(2—2)----- 基本使用 [2]

… … …

遇见 vue.js --------阿文的vue.js学习笔记(目录)

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

**

数组更新的检测

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

push ( ) 在后方追加
pop ( ) 后方减少
shift() 前面减少
unshift ( ) 前面追加
splice ( ) 删除
reverse ( ) 反转

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

下面来简单示例一下上面的 代码:
遇见 vue.js --------阿文的vue.js学习笔记(8 — 2)------列表渲染-----数组及对象更新检测
首先看这里是一段代码的执行结果,创建了一个有三项的数组

1、push () 在后方追加

示例:你可以看到当该语句回车执行之后,我们页面中的数组马上被添加了一个新的 数据
遇见 vue.js --------阿文的vue.js学习笔记(8 — 2)------列表渲染-----数组及对象更新检测

2、pop ( ) 删除后方的数据

示例:你可以发现当我们在控制台中输入该语句执行之后,页面中最后排的数据被直接删除了
遇见 vue.js --------阿文的vue.js学习笔记(8 — 2)------列表渲染-----数组及对象更新检测

3、shift() 删除前方第一个数据

示例:你可以发现当命令执行之后,我们页面中被渲染的数组中的第一个数据被删除
遇见 vue.js --------阿文的vue.js学习笔记(8 — 2)------列表渲染-----数组及对象更新检测

4、unshift ( ) 在前方添加数据

示例:你可以发现当我们的命令执行之后,我们页面中的第一个被渲染了新的数据
遇见 vue.js --------阿文的vue.js学习笔记(8 — 2)------列表渲染-----数组及对象更新检测

5、splice ( ) 删除

示例:splice(1,2)是删除该 数组中起始位置为索引1,然后长度为的2 的2个单位
遇见 vue.js --------阿文的vue.js学习笔记(8 — 2)------列表渲染-----数组及对象更新检测

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

6、reverse ()反转

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

对象更新

首先我们先创建一个对象,然后渲染进页面
遇见 vue.js --------阿文的vue.js学习笔记(8 — 2)------列表渲染-----数组及对象更新检测

1、添加属性

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

示例: 添加一个宠物的属性
遇见 vue.js --------阿文的vue.js学习笔记(8 — 2)------列表渲染-----数组及对象更新检测

2、删除属性

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

示例: 删除一个 name 的属性
遇见 vue.js --------阿文的vue.js学习笔记(8 — 2)------列表渲染-----数组及对象更新检测

**
关注 校园君有话说 公众号 ,回复 web前端 免费领取50G 前端学习资料 一份 ,我们一起学习进步吧。
遇见 vue.js --------阿文的vue.js学习笔记(8 — 2)------列表渲染-----数组及对象更新检测
**