1. <!DOCTYPE html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>列表排序</title>
    8.     <script src="../js/vue.js"></script>
    9.     <style>
    10.       table,tr,td,th{
    11.         border:1px solid black;
    12.       }
    13.     </style>
    14.   </head>
    15.   <body>
    16.     <div id="app">
    17.       <h1>{{msg}}</h1>
    18.       <input type="text" placeholder="输入关键字搜索" v-model="keyword"><br>
    19.       <button @click="type = 1">按照名字升序</button><br>
    20.       <button @click="type = 2">按照名字降序</button><br>
    21.       <button @click="type = 0">按照名字原始顺序</button><br>
    22.       <table>
    23.         <tr>
    24.           <th>序号</th>
    25.           <th>姓名</th>
    26.           <th>邮箱</th>
    27.           <th>操作</th>
    28.         </tr>
    29.         <tr v-for="(vip, index) in filterVips" :key="vip.id">
    30.           <td>{{index+1}}</td>
    31.           <td>{{vip.name}}</td>
    32.           <td>{{vip.email}}</td>
    33.           <td><input type="checkbox"></td>
    34.         </tr>
    35.       </table>
    36.     </div>
    37.     <script>
    38.       const vm = new Vue({
    39.         el : '#app', 40. data : {
    40.           msg : '列表排序', 42. vips : [
    41.             {id:'100',name:'jack',email:'jack@123.com'}, 44. {id:'200',name:'lucy',email:'lucy@123.com'}, 45. {id:'300',name:'james',email:'james@123.com'}, 46. {id:'400',name:'lilei',email:'lilei@123.com'}, 47. ], 48. keyword : '', 49. type : 0
    42.         }, 51. computed : {
    43.           filterVips(){
    44.             // 筛选
    45.             let arr = this.vips.filter((vip) => {
    46.               return vip.name.indexOf(this.keyword) >= 0
    47.             })
    48.             // 根据排序类型进行排序
    49.             if(this.type){
    50.               arr.sort((v1, v2) => {
    51.                 console.log('@')
    52.                 return this.type == 1 ? v1.name.localeCompare(v2.name) : v2.name.localeCompare(v1.name)
    53.               })
    54.             }
    55.             // 返回
    56.             return arr
    57.           }
    58.         }
    59.       })
    60.     </script>
    61.   </body>
    62. </html>