VUE：列表的過濾與排序
阿新 • • 發佈：2018-11-12
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>06_列表渲染_過濾與排序</title> </head> <body> <!-- 1.列表過濾 2.列表排序 --> <div id="test"> <input type="text" v-model="searchName"/> <ul> <li v-for="(p,index) in filterPersons" :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> new Vue({ el: '#test', data:{ persons:[ {name:'Tom',age:18}, {name:'Jack',age:16}, {name:'Bob',age:19}, {name:'Rose',age:17} ], searchName:'', orderType: 0, //0代表原本，1代表升序，2代表降序 }, computed:{ filterPersons(){ //取出相關資料 const {searchName,persons,orderType}=this //最終需要顯示的陣列 let fPersons; //對persons進行過濾 fPersons=persons.filter(p=> p.name.indexOf(searchName)!==-1) //排序 if(orderType!==0){ fPersons.sort(function(p1,p2){ //返回負數P1在前，返回正數P2在前 //1代表升序，2代表降序 if(orderType===2){ return p2.age-p1.age }else{ return p1.age-p2.age } return p2.age-p1.age }) } return fPersons } }, methods:{ setOrderType(orderType){ this.orderType=orderType } } }) </script> </body> </html>