介绍

用 v-for 把一个数组对应为页面上的一组元素

vue.js 使用的是 v-for 指令来处理组件元素的循环迭代逻辑。通常它会和 v-if 配合使用，达到我们所需要的处理逻辑。
v-for 的语法形式是 item in items，其中 items 就是我们要循环的数组，而 item 则是被迭代的数组元素的别名。

<ul > <li v-for="item in items">  {{ item.message }} </li></ul>

我们都知道既然有循环那肯定少不了对索引的处理。v-for 指令给我们提供了可选的第二个参数，即当前项的索引。

<ul > <li v-for="(item, index) in items">  {{ parentMessage }} - {{ index }} - {{ item.message }} </li></ul>

index 就是那个当前索引了。

你也可以使用 of 替代 in 作为分隔符。

<div v-for="item of items"></div>

在 v-for 里使用对象

是哒，很明显 v-for 也可以用来遍历一个对象的属性。

<ul  class="demo"> <li v-for="value in object">  {{ value }} </li></ul>

也可以提供第二个参数为 property 名称 (也就是键名)

<div v-for="(value, name) in object"> {{ name }}: {{ value }}</div>

还可以用第三个参数作为索引

<div v-for="(value, name, index) in object"> {{ index }}. {{ name }}: {{ value }}</div>

维护状态

敲黑板啦哈~

vuejs 为了维护循环列表的状态需要提供唯一的 key 属性。
这个唯一的 key 可以为我们提供列表元素状态的更新，避免重复渲染等优化页面的性能。

这个 key 很关键，并不推荐使用简单的索引作为 key 的值，因为会有造成重复渲染混乱的可能。

数组更新检测

咳咳～ 继续敲黑板

我们在写程序的时候，往往会有数据更新但是页面元素没有跟着对应变化的情况。

数组列表的更新检测 vue 为我们提供了一套解决方案，但是需要注意它们在使用的方式上是不同的。

变异方法

意思就是以下的数组处理方法可以触发视图上的更新。

push()pop()shift()unshift()splice()sort()reverse()

需要注意的是它们处理的都是原始数组。也就是在原来的数组上增加删除或者排序操作。

非变异方法

数组也有一些方法不会改变原始数据，而是返回新的数组。

filter()concat()slice()

返回新的数组在页面更新渲染的性能大家不必担心，vue 已经为我们做好了重用工作。

需要注意，在有些情况 vue 无法检测数组变动的情况如下：

当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue 当你修改数组的长度时，例如：vm.items.length = newLength

var vm = new Vue({ data: {  items: ['a', 'b', 'c'] }})vm.items[1] = 'x' // 不是响应性的vm.items.length = 2 // 不是响应性的

为了解决这类问题，官方提供了两种解决方案。

1、Vue.set

// Vue.setVue.set(vm.items, indexOfItem, newValue)

2、Array.prototype.splice