v-for循环列表渲染
我们可以使用
v-for
指令来基于一个数组或对象来循环渲染一个列表。
-
使用数组来循环：
-
v-for指令需要使用item in items形式的特殊语法，其中items是源数据数组，而item则是被迭代的数组元素的 别名 。 -
使用列表循环时，
v-for还支持一个可选的第二个参数，即当前项的索引。如v-for="(item, index) in items"。
-
-
使用对象来循环：
-
可以用
v-for来遍历一个对象的 property属性。如v-for="value in object"。 -
可以提供第二个的参数为 property 属性名称 (也就是键名)，如
v-for="(value, name) in object"。 -
还可以用第三个参数作为索引，如
v-for="(value, name, index) in object"。
-
可以用
我们来测试一下官方的示例。
1. v-for对数组进行循环处理
我们运行代码，并在浏览器中打开页面，看到如下页面;
我们连接点击两次
Add
按钮，可以发现控制台提示异常：
由于我们使用的是
v-bind:key="item.message"
来确定
key
属性，多们多次点击
Add
按钮后，会出现多个key值是
new message
的
<li>
,因此此时我们应该修改一下
key
绑定的值，我们可以使用
index
索引值。
将12行的
改成
将13行改成:
然后再刷新页面，并多次点击
Add
按钮。效果如下：
此时可以看到，点击多次按钮时，控制台并不会提示更新异常问题。说明使用
index
作为
key
属性是正确的。
2. v-for对对象进行循环处理
在遍历对象时，会按
Object.keys()的结果遍历，但是 不能 保证它的结果在不同的 JavaScript 引擎下都一致。
我们来测试一下官方代码。
在浏览器中打开页面，效果如下图所示：
可以看到
Object.keys(app.object)
获取到了一个数组，数组元素是各属性名，如
title
、
author
和
publishedAt
。不能使用
app.object.keys()
来形成数组。
直接对对象进行循环遍历感觉怪怪的。:😿
3. 使用v-for模拟豆瓣书单
豆瓣书单长这样：
我模拟生成一个简单的书单表格：
效果图：
相差甚远。
4. v-for就地更新策略
当 Vue 正在更新使用
v-for渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。这个类似 Vue 1.x 的track-by="$index"。这个默认的模式是高效的，但是 只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出 。
Vue在进行
v-for
渲染时，默认使用就地更新策略。即默认使用已经渲染的元素。直接在已有的DOM上进行复用修改，这样可以带来一定性能上的提升。Vue官方建议尽可能的可
v-for
每一项提供一个唯一的
key
属性，如可以将
index
或
id
之类的属性作为
key
属性。
如：
5. 数组更新检测
Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：
push()pop()shift()unshift()splice()sort()reverse()你可以打开控制台，然后对前面例子的
items数组尝试调用变更方法。比如example1.items.push({ message: 'Baz' })。
而我们通过 JavaScript 数组方法 可以了解到，javascript中数组具有以下方法：
-
toString(),把数组转换为数组值（逗号分隔）的字符串。 -
join(sep),将所有数组元素结合为一个字符串。默认使用逗号作为分隔符，也可以指定wep参数作为分隔符。 -
pop()，从数组中删除最后一个元素。 -
push(item),（在数组结尾处）向数组添加一个新的元素item。 -
shift(),位移与弹出等同，但处理首个元素而不是最后一个。会删除首个数组元素，并把所有其他元素“位移”到更低的索引。，简单理解就是将数组开头元素弹出。 -
unshift()方法（在开头）向数组添加新元素，并“反向位移”旧元素，简单理解就是在数组开头插入元素。 -
length属性，返回数组长度。 -
splice()方法可用于向数组添加新项，其接收多个参数，第1个参数定义了应添加新元素的位置（拼接），第2个参数定义要删除几个元素，如果还是其他参数的话，则都是新增元素。 -
concat()方法通过合并（连接）现有数组来创建一个新数组,类似于Python中的list.extend()。 -
slice()方法用数组的某个片段切出新数组。它接受两个参数，该方法会从开始参数选取元素，直到结束参数（不包括）为止。如果结束参数被省略，则slice()会切出数组的剩余部分。 -
reverse()方法反转数组中的元素。 -
sort()方法以字母顺序对数组进行排序。
我们使用数组的变化，更新一下书单表格。
更新后的代码，可以实现书单的新增、编辑、删除和保存功能（注，并没有实际保存到后端去）。效果图如下:
如我们在示例中使用了：
-
this.splice(index, 0, item);实现元素的插入。 -
this.books.splice(index, 1)实现元素的删除。
另外，我们在之前的章节
计算属性与侦听器
中已经使用过
this.message.split('').reverse().join('')
来对数组进行反转和结合。
我们也可以在控制台使用数组的方法来改变我们页面的显示。
经过
pop()
和
shift()
操作后，
app.books
的长度变成2了。
你还可以进行其他的方法的测试。此处省略。
6. v-for与过滤器联合使用
我们也可以在
v-for
中使用过滤器。如官方示例通过两种方式显示偶数。请看以下代码。