SOURCE

var vm = new Vue({
   el:'#app',
  data () {
    return {
      sortType: 0,//0为原顺序 1为升序 2为降序
      keyWord: '',
      persons: [
        { id: 1, name: '马冬梅', age: 18, sex: '女' },
        { id: 2, name: '周冬雨', age: 15, sex: '女' },
        { id: 3, name: '周杰伦', age: 28, sex: '男' },
        { id: 4, name: '温兆伦', age: 20, sex: '男' },
      ],
      // filPersons:'',
    }
  },
  computed: {
    filPersons () {
      //使用filter过滤产生新数组,return新数组
      const arr = this.persons.filter((p) => {
        //indexOf包含并返回下标, -1为不包含
        return p.name.indexOf(this.keyWord) !== -1
      })
      //判断是否需要排序
      if (this.sortType){
        arr.sort((p1,p2)=>{
          return this.sortType==1? p1.age-p2.age : p2.age-p1.age
          // arr.sort(function (a,b){
          //   return a-b //升序
          //   return b-a //降序
          //   return Math.random()-0.5 //乱序
          // })
        })
      }
      return arr
    },
  }
 
})

<div id="app">
    <h2>人员列表</h2>
    <input type="text" placeholder="请输入名字" v-model="keyWord">
    <button @click="sortType=1">年龄升序</button>
    <button @click="sortType=2">年龄降序</button>
    <button @click="sortType=0">原顺序</button>
    <ul>
      <li v-for="p in filPersons" :key="p.id">
        {{ p.name }}--{{ p.age }}--{{ p.sex }}
      </li>
    </ul>
  </div>