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>