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()，這些不會改變原始數組，但總會返回一個新數組。
