<!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>