列表渲染

1.v-for

我们用 v-for 指令根据一组数组的选项列表进行渲染。 v-for 指令需要以 item in items 形式的特殊语法（也可以用of代替in）， items是源数据数组并且 item 是数组元素迭代的别名。

1.1基本用法

<ul id="example-1">
　　<li v-for="item in items">
　　　　{{ item.message }}
　　</li>
</ul>
var example1 = new Vue({
　　el: '#example-1',
　　data: {
　　　　items: [
　　　　　　{message: 'Foo' },
　　　　　　{message: 'Bar' }
　　　　]
　　}
})
v-for 还支持一个可选的第二个参数为当前项的索引。
<ul id="example-2">
<li v-for="(item, index) in items">
　　 {{ index }} - {{ item.message }}
</li>
</ul>
1.2Template v-for
类似于 v-if 模板，你也可以用带有 v-for 的 <template> 标签来渲染多个元素块。
<ul>
<template v-for="item in items">
<li>{{ item.msg }}</li>
<li class="divider"></li>
</template>
</ul>
1.3对象迭代v-for
也可以用 v-for 通过一个对象的属性来迭代。
<ul id="repeat-object" class="demo">
　　<li v-for="value in object">
　　　　{{ value }}
　　</li>
</ul>
new Vue({
　　el: '#repeat-object',
　　data: {
　　object: {
　　　　FirstName: 'John',
　　　　LastName: 'Doe',
　　　　Age: 30
　　　　}
　　}
})
你也可以提供第二个的参数为键名，第三个参数为索引。
1.4整数迭代v-for
v-for 也可以取整数。在这种情况下，它将重复多次模板。
<div>
　　<span v-for="n in 10">{{ n }}</span>
</div>
1.5组件和v-for
在自定义组件里，你可以像任何普通元素一样用 v-for 。<my-component v-for="item in items"></my-component>，但是因为组件有自己独立的作用域，为了传递迭代数据到组件里，我们要用 props。
2.key
 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用 “就地复用” 策略。如果数据项的顺序被改变，Vue将不是移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key属性。理想的 key 值是每项都有唯一 id。
建议尽可能使用 v-for 来提供 key ，除非迭代 DOM 内容足够简单，或者你是故意要依赖于默认行为来获得性能提升。
3.数组更新检测
3.1变异方法
Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法有：push()、pop()、shift()、unshift()、splice()、sort()、reverse()。
3.2重塑数组
变异方法会改变被这些方法调用的原始数组。相比之下，也有非变异(non-mutating method)方法，例如： filter(), concat(), slice() 。这些不会改变原始数组，但总是返回一个新数组。
3.3注意事项

由于 JavaScript 的限制， Vue 不能检测以下变动的数组：

1.当你利用索引直接设置一个项时，例如： vm.items[indexOfItem] = newValue

2.当你修改数组的长度时，例如： vm.items.length = newLength

为了避免第一种情况，以下两种方式将达到像 vm.items[indexOfItem] = newValue 的效果， 同时也将触发状态更新：

// Vue.set
Vue.set(example1.items, indexOfItem, newValue)
// Array.prototype.splice`
example1.items.splice(indexOfItem, 1, newValue)
避免第二种情况，使用 splice：
example1.items.splice(newLength)
4.显示过滤/排序结果
有时，我们想要显示一个数组的过滤或排序副本，而不实际改变或重置原始数据。在这种情况下，可以创建返回过滤或排序数组的计算属性。
<li v-for="n in evenNumbers">{{ n }}</li>
 
data: {
numbers: [ 1, 2, 3, 4, 5 ]
},
computed: {
evenNumbers: function () {
return this.numbers.filter(function (number) {
return number % 2 === 0
})
}
}