Vue实现列表过滤与排序的两种方法

<div id="APP">
  <input type="text" v-model="keyWord">
  <ul>
    <li v-for="(item,index) of newList" :key="item.id">
      {{item.name}} - {{item.age}} - {{item.sex}}
    </li>
  </ul>
</div>

const vm = new Vue({
  el: "#APP",
  data(){
    return {
      // keyWord 用于接收用户输入的内容
      keyWord:"",
      // 原始数据列表，用于过滤，不可更改
      list:[
        {id:1, name:"马冬梅", age:30, sex:"女"},
        {id:2, name:"周冬雨", age:18, sex:"女"},
        {id:3, name:"周杰伦", age:26, sex:"男"},
        {id:4, name:"温兆伦", age:24, sex:"男"}
      ],
      // 过滤后的数据列表，用于渲染页面
      newList:[]
    }
  },
  watch:{
    // 监听 keyWord 数据变化，当用户输入时进行操作
    keyWord:{
      // 初始化时执行一下，避免页面加载时 newList 中没有数据
      immediate:true,
      handler(val){
        // 利用 filter 方法让 newList 等于过滤后的数据列表
        this.newList = this.list.filter((item) => {
          // 利用 indexOf 方法返回条件成立的数据
          return item.name.indexOf(val) !== -1;
        })
      }
    }
  }
});

<div id="APP">
  <input type="text" v-model="keyWord">
  <ul>
    <li v-for="(item,index) of newList" :key="item.id">
      {{item.name}} - {{item.age}} - {{item.sex}}
    </li>
  </ul>
</div>

const vm = new Vue({
  el: "#APP",
  data(){
    return {
      // keyWord 用于接收用户输入的内容
      keyWord:"",
      // 原始数据列表，用于过滤，不可更改
      list:[
        {id:1, name:"马冬梅", age:30, sex:"女"},
        {id:2, name:"周冬雨", age:18, sex:"女"},
        {id:3, name:"周杰伦", age:26, sex:"男"},
        {id:4, name:"温兆伦", age:24, sex:"男"}
      ]
    }
  },
  computed:{
    // 计算一个新的数据列表，用于渲染页面
    newList(){
      // 返回过滤后的数据列表
      return this.list.filter((item) => {
        return item.name.indexOf(this.keyWord) !== -1;
      })
    }
  }
});

<div id="APP">
  <input type="text" v-model="keyWord">
  <button @click="sortType = 2">年龄升序</button>
  <button @click="sortType = 1">年龄降序</button>
  <button @click="sortType = 0">原顺序</button>
  <ul>
    <li v-for="(item,index) of newList" :key="item.id">
      {{item.name}} - {{item.age}} - {{item.sex}}
    </li>
  </ul>
</div>

const vm = new Vue({
  el: "#APP",
  data(){
    return {
      keyWord: "",
      // 0 表示原顺序、1 降序、2 升序
      sortType: 0,
      list:[
        {id:1, name:"马冬梅", age:30, sex:"女"},
        {id:2, name:"周冬雨", age:18, sex:"女"},
        {id:3, name:"周杰伦", age:26, sex:"男"},
        {id:4, name:"温兆伦", age:24, sex:"男"}
      ]
    }
  },
  computed:{
    newList(){
      // 因为需要排序过滤之后的数据，所以不能直接返回
      const arr = this.list.filter((item) => {
        return item.name.indexOf(this.keyWord) !== -1;
      })
      // 判断 sortType 是否不为 0，不为 0 表示需要排序
      if(this.sortType){
        arr.sort((min,max) => {
          // 1 表示降序，从大到小。2 表示升序，从小到大
          if(this.sortType === 1){
            return max.age - min.age;
          }else{
            return min.age - max.age;
          }
        })
      }
      return arr;
    }
  }
});