1 <template>
 2     <div>
 3         
 4          <div>
 5              <h3>排序</h3>
 6              <button @click="orderByAge(0)">默认排序</button>
 7              <button @click="orderByAge(1)">年龄降序↓</button>
 8              <button @click="orderByAge(2)">年龄升序↑</button>
 9          </div>
10          <p>--------------------------------------</p>
11          <!--过滤查询  -->
12          <h3>搜索列表</h3>
13          <input type="text" placeholder="请输入你所查询的姓名"  v-model="serchNmae">
14          <ul>
15              <li v-for="(p ,index) in filterPersons" :key="personsKeys[index]">
16               {{index+1}}  姓名: {{p.name}} 年龄:{{p.age}}性别:{{p.sex}} --->{{p.phone}}
17              </li>
18          </ul>
19          
20     </div>
21 
22 </template>
23 <script>
24 import shortId from 'shortid'
25 export default {
26     name:'listRenderTwo',
27     data(){
28         return{
29             serchNmae:'',
30             personsKeys:[],
31             orderType:0,//排序
32             persons:[
33               {name:'张三',age:18,sex:'男' ,phone:12345678901,},
34               {name:'李四',age:16,sex:'男',phone:12345678901,},
35               {name:'易遥',age:15,sex:'女',phone:12345678901},
36               {name:'如花',age:18,sex:'女',phone:12345678901},
37               {name:'夜华',age:18,sex:'男',phone:12345678901},
38               {name:'二狗子',age:18,sex:'男',phone:12345678901},
39               {name:'青蓝',age:16,sex:'男',phone:12345678901},
40               {name:'李萌',age:15,sex:'女',phone:12345678901},
41               {name:'周华',age:18,sex:'女',phone:12345678901},
42               {name:'周燕子',age:18,sex:'男',phone:12345678901}
43             ]
44         }
45     }
46     ,
47     mounted(){
48       this.personsKeys=this.persons.map(v=>shortId.generate())
49     },
50     //计算属性
51     computed:{
52       filterPersons(){
53         let {serchNmae,persons,orderType} =this;
54         //取出数组中的数据
55         let arr =[...persons]
56         //过滤数组
57         if(serchNmae.trim()){
58             arr = persons.filter(p=>p.name.indexOf(serchNmae)!==-1)
59         }
60         //4排序
61         if(orderType){
62             arr.sort((p1,p2)=>{
63                 if(orderType===1){
64                     //降序
65                     return p2.age -p1.age
66                 }else{
67                    // 升序
68                    return p1.age -p2.age
69                 }
70             })
71         }
72         return arr;
73       }
74     },
75     methods:{
76      orderByAge(orderType){
77          this.orderType=orderType
78      }
79     }
80 }
81 </script>
82 <style  scoped>
83   ul{
84       list-style: none;
85   }
86   ul li{
87       padding: 8px 0;
88   }
89 </style>