循環列表

var example1 = new Vue({el: '#example-1',data: {items: [{ message: 'Foo' },{ message: 'Bar' }]}
})

<ul id="example-1"><li v-for="item in items">{{ item.message }}</li>
</ul>

index是該元素的索引

<ul id="example-2"><li v-for="(item, index) in items">{{ parentMessage }} - {{ index }} - {{ item.message }}</li>
</ul>

循環字典

new Vue({el: '#v-for-object',data: {object: {firstName: 'John',lastName: 'Doe',age: 30}}
})

<div v-for="(value, key, index) in object">{{ index }}. {{ key }}: {{ value }}
</div>

vue數組操作

變異方法

注意下面兩個都不是響應式的,
1.當你利用索引直接設置一個項時，例如：vm.items[indexOfItem] = newValue
2.當你修改數組的長度時，例如：vm.items.length = newLength
所以要使用下面的方法代替
1.Vue.set(vm.items, indexOfItem, newValue)
2.vm.items.splice(newLength)

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

非變異方法

filter()
concat()
slice()

對象數據操作

var vm = new Vue({data: {a: 1}
})
// `vm.a` 現在是響應式的vm.b = 2
// `vm.b` 不是響應式的

響應式的要使用
Vue.set(vm.userProfile, 'age', 27)

<template>