1.v-for
使用v-for指令基于一个数组渲染一个列表。
<ul id="demo"><li v-for="item in items">{{item.message}}</li></ul>
var demo = new Vue({
el:"#demo",
data:{
items:[
{message:'Foo'},
{message:'Bar'}
]
}
});
特别说明:在v-for块内能访问父组件作用域内的属性已经数组索引$index；
<ul id="demo"><li v-for ="item in items">{{parentMessage}}-{{$index}}-{{item.message}}</li></ul>
var demo = new Vue({
el:"#demo",
data:{
parentMessage:'Parent',
items:[
{message:'Foo'},
{message:'Bar'}
]
}
});
2.template v-for
类似于template v-if，也可以将v-for用在<template>标签上，已渲染一个包含多个元素的块。
<ul>
<template v-for="item in items">
<li>{{item.msg}}</li>
<li class="divider"></li>
</template>
</ul>
3.数组变动检测
(1).变异方法
push()/pop()
shift()/unshift()
splice()
sort()/reverse()
(2).替换数组
不会修改原数组而是返回一个新数组的非变异方法，直接用新数组替换旧数组
demo.items = example.items.filter(function(item){
return item.message.match(/Foo/);
});
filter()/concat()/slice()
(3).track-by
用去全新对象替换数组，使用track-by特性给Vue.js提示，尽可能地复用已有地实例。
{items:[
{_uid:'98989d',....},{_uid:'8980d678',....}
]}
<div v-for="item in items" track-by="_uid">
<!-- content-->
</div>
(4).track-by $index
使用track-by="$index"强制让v-for进入原位更新模式
片段不会被移动，而是简单地以对应索引的新值刷新。
DOM节点不再映射数组元素顺序的改变，不能同步临时状态以及组件的私有状态
所以，慎用这个指令
(5).问题
因为js的限制，Vue.js不能检测到以下数组变化
直接用索引设置元素，如果vm.items[0] = {};
===解决办法Vue.js扩展了观察数组,为他添加了一个$set()方法
demo.items.$set(0,{childMsg:'Changed!'})
修改数据的长度，如:vm.items.length = 0
===用一个空数组替换items
ps:除了$set(),Vue.js也为观察数组添加了$remove()方法，用于从目标数组中查找并删除元素，在内部自动调用splice()
之前的写法
var index = this.items.indexOf(item);
if(index !==-1){
this.items.splice(index,1);
}
现在就很简单，只需一句话:this.items.$remove(item);
4.对象v-for
可以用来遍历对象，除了$index之外，作用域还可以访问另外一个特殊变量$key。
<ul id = "repeat=object" class="demo">
<li v-for="value in object">{{$key}}:{{value}}</li>
</ul>
new Vue(
el:"#repeate-object",
data:{
object:{
FirstName:'John',
LastName:'Doe',
Age:30
}
}
);
5.值域v-for
v-for也可以接收一个整数，此时它将重复模板数次。
<div>
<span v-for="n in 10">{n}</span>
</div>
0，1，2，3，4，5，6，7，8，9
6.显示过滤/排序的结果
想要显示过滤/排序过的数组，同时不实际修改或重置原始数据，有两个方法:
a.创建一个计算属性，返回过滤/排序过的数组;
b.使用内置的过滤器filterBy和orderBy(例子见链接https://www.cnblogs.com/moqiutao/p/6383318.html)
计算属性有更好的控制力，也更灵活，因为他是全功能的JavaScript，但是通常过滤器更方便