v-for 指令根据一组数组的选项列表进行渲染
基本用法
---数组迭代----v-for
<ul id="example-1">
<li v-for="(item, index) in items">
{{ item.message }}
</li>
</ul>
var example1 = new Vue({
el: '#example-1',
data: {
items: [
{ message : 'Foo'},
{ message : 'Bar'}
]
}
})
====>输出 Foo,Bar
---对象迭代----v-for
value: 每个迭代的值,key: 每个迭代的键名,index: 每个迭代的索引值
<ul id="repeat-object" class="demo">
<li v-for="(value, key, index) in object">
{{ value }}
</li>
</ul>
new Vue({
el: '#repeat-object',
data: {
object: {
FirstName: 'John',
LastName: 'Doe',
Age: 30
}
}
})
数组更新检测:
Vue包含一组观察数组的变异方法,会改变被这些方法调用的原始数组,所以他们也将会触发视图更新
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
非变异方法:filter(), concat(), slice(),这些不会改变原始数组,但总会返回一个新数组。