html

•     <div id="test">
  
          <label>
  
              <input type="text" v-model="searchWord" placeholder="搜索一下"/>
  
          </label>
  
          <button type="button" @click="orderType=1">原来排序</button>
  
          <button type="button" @click="orderType=2">升序排序</button>
  
          <button type="button" @click="orderType=3">降序排序</button>
  
          <ul>
  
              <li v-for="(p, index) in searchResult">
  
                  {{p.name}}----{{p.age}}
  
              </li>
  
          </ul>
  
      </div>

js

• <script src="./js/vue.js"></script>
  
      <script>
  
          new Vue({
  
              el:"#test",
  
              data(){
  
                  return {
  
                      persons:[
  
                          {name:"Tom", age:18},
  
                          {name:"Jack", age:16},
  
                          {name:"Jerry", age:15},
  
                          {name:"Kate", age:17},
  
                          {name:"Lee", age:14}
  
                      ],
  
                      searchWord: "",
  
                      orderType: 1
  
                  }
  
              },
  
              computed:{
  
                  searchResult(){
  
                      const {orderType, searchWord, persons} = this;
  
                      let result = persons.filter(person=>person.name.indexOf(searchWord)!==-1);
  
                      if(orderType !== 1){
  
                          result.sort((one, two)=>{
  
                              if(orderType === 2){
  
                                  return one.age - two.age
  
                              }else if(orderType === 3){
  
                                  return two.age - one.age
  
                              }
  
                          })
  
                      }
  
                      return result;
  
                  }
  
              }
  
          })
  
      </script>