Vue列表的過濾和排序
阿新 • • 發佈:2021-06-17
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hello World</title> <script src="../js/vue.js"></script> </head> <body> <div id="app"> <input type="text" v-model="searchName" /><br /> <ul> <li v-for="(item, index) in filteredPersons" :key='index'> {{item.name}}---{{item.age}} </li> <button type="button" @click="orderType=1">按age升序</button> <button type="button" @click="orderType=2">按age降序</button> <button type="button" @click="orderType=0">原始順序</button> </ul> </div> <script> const vm = new Vue({ el: '#app', data: { searchName: '', persons: [ {name:'tom', age:19}, {name:'jerry', age:15}, {name:'spike', age:20} ], orderType: 0//0 不排序,1升序,2降序 }, computed:{ filteredPersons(){ const {searchName, persons, orderType} = this const newPersons = persons.filter(p=>p.name.indexOf(searchName)!==-1) return orderType===0? newPersons: orderType===1? newPersons.sort((a, b)=>a.age-b.age): newPersons.sort((a, b)=>b.age-a.age) } } }) </script> </body> </html>