用v-for 把一个数组对应为一组元素
v-for 指令需要使用 item in items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名。
<ul id="example-1">
<li v-for="item in items">
{{item.message}}
</li>
</ul>
var vm = new Vue({
el:"#example-1",
data:{
items:[
{message:'Foo'},
{message:'Bar'}
]
}
})
在v-for块中,我们拥有对父作用域的完全访问权限.v-for还支持一个可选的第二个参数为当前项的索引
<ul id="example-2">
<li v-for="(item, index) in items">
{{parentMessage}}-{{index}}-{{item.message}}
</li>
</ul>
var example2 = new Vue({
el:"#example-2",
data:{
parentMessage:"Parent",
items:[
{message:"Foo"},
{message:"Bar"}
]
}
})
结果:
Parent-0-Foo
Parent-1-Bar
也可以用 of 替代 in 作为分隔符，因为它是最接近 JavaScript 迭代器的语法
<div v-for="item of items"></div>
一个对象的v-for
可以用v-for通过一个对象的属性来迭代
key为键名 index为索引
<ul id="example-3" class="demo">
<li v-for="(value, key, index ) in object">
{{value}}
</li>
</ul>
var vm = new Vue({
el:"#example-3",
data:{
object:{
firstName:"John",
lastName:"Doe",
age:26
}
}
})
结果
firstName:John
lastName:Doe
age:26
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的且唯一的 id。但它的工作方式类似于一个属性，所以你需要用 v-bind 来绑定动态值
<div v-for="item in items" :key="item.id">
...
</div>
数组更新检测
#变异方法 顾名思义，会改变被这些方法调用的原始数组
Vue包含一组观察数组的变异方法,所以它们也将会触发视图更新.
push() //添加最后一项
pop() //删除最后一项
shift() //删除第一项
unshift() //添加第一项
splice()
sort()
reverse()
#替换数组 , 不会改变原始数组，但总是返回一个新数组
filter()
concat()
slice()
例:
example.items = example.items.filter(function(item){
return item.meaa
})
