7. 列表渲染

列表

• 列表显示指令
  - 数组: 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>

<div id="demo">
	<input type="text" name="searchName" placeholder="搜索指定用户名"
	v-model="searchName">
	<ul>
		<li v-for="(p, index) in filterPerson" :key="index">
		{{index}}--{{p.name}}--{{p.age}}
		</li>
	</ul>
	<button @click="setOrderType(1)">年龄升序</button>
	<button @click="setOrderType(2)">年龄降序</button>
	<button @click="setOrderType(0)">原本顺序</button>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
	el: '#demo',
	data: {
		orderType: 0, //0 代表不排序, 1 为升序, 2 为降序
		searchName: '',
		persons: [
		{id: 1, name: 'Tom', age: 13},
		{id: 2, name: 'Jack', age: 12},
		{id: 3, name: 'Bob', age: 17},
		{id: 4, name: 'Cat', age: 14},
		{id: 4, name: 'Mike', age: 14},
		{id: 4, name: 'Monica', age: 16}
		]
	},
	methods: {
		setOrderType (orderType) {
			this.orderType = orderType
		}
	},
	computed: {
		filterPerson() {
			let {orderType, searchName, persons} = this
			// 过滤
			persons = persons.filter(p => p.name.indexOf(searchName)!=-1)
			// 排序
			if(orderType!==0) {
			persons = persons.sort(function (p1, p2) {
			if(orderType===1) {
			return p1.age-p2.age
			} else {
			return p2.age-p1.age
			}
			})
			}
			return persons
		}
	}
})
</script>