1.1. 效果 (06_列表渲染/test.html)
06_列表渲染.gif
06_列表的过滤和 排序.gif
1) 列表显示指令 数组:v-for/index 对象:v-for/key 2) 列表的更新显示 删除 item 替换 item 3) 列表的高级处理
列表过滤
列表排序
1.2. 编码 1
<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>
1.3. 编码 2
<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>