列表

• 列表显示指令
  - 数组: v-for / index
  - 对象: v-for / key
• 列表的更新显示
  - 删除 item
  - 替换 item
• 列表的高级处理
  - 列表过滤
  - 列表排序

编码

<div id="demo">
	<h2>测试: v-for 遍历数组</h2>
	<ul>
		<li v-for="(p, index) in persons" :key="index">
		{{index}}--{{p.name}}--{{p.age}}
		--
		<button @click="deleteItem(index)">删除</button>
		--
		<button @click="updateItem(index, {name:'Jok',age:15})">更新</button>
	</li>
</ul>
	<h2>测试: v-for 遍历对象</h2>
	<ul>
		<li v-for="(value, key) in persons[0]">
			{{ key }} : {{ value }}
		</li>
	</ul>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
	el: '#demo',
	data: {
		persons: [
			{id: 1, name: 'Tom', age: 13},
			{id: 2, name: 'Jack', age: 12},
			{id: 3, name: 'Bob', age: 14}
		]
},
methods: {
deleteItem(index) {
this.persons.splice(index, 1)
},
updateItem(index, p) {
// this.persons[index] = p // 页面不会更新
this.persons.splice(index, 1, p)
}
}
})
</script>