vue 实现列表的搜索匹配和排序操作

vue 实现列表的搜索匹配和排序操作

布局：

<div id="app">
    <input type="text" placeholder="请输入搜索词" v-model="serachName">
    <ul>
      <li v-for="(person) in personsFilter">
        {{person.id}} -- {{person.name}} -- {{person.age}}
      </li>
    </ul>
    <button @click="handleSort(0)">默认</button>
    <button @click="handleSort(1)">升序</button>
    <button @click="handleSort(2)">降序</button>
  </div>

js：

new Vue({
    data: {
      serachName: '',
      sortType: '',
      persons: [{
          id: 1,
          name: "tom",
          age: 11
        },
        {
          id: 2,
          name: "jerry",
          age: 33
        },
        {
          id: 3,
          name: "lisa",
          age: 8
        },
        {
          id: 4,
          name: "jok",
          age: 19
        },
        {
          id: 5,
          name: "mecje",
          age: 25
        },
        {
          id: 6,
          name: "hili",
          age: 28
        },
        {
          id: 7,
          name: "hibe",
          age: 41
        },
      ]
    },
    methods: {
      handleSort(sortType) {
        this.sortType = sortType
      }
    },
    computed: {
      personsFilter: function () {
        const {
          persons,
          serachName,
          sortType
        } = this
        const personsFilter = persons.filter(function (person) {
          return person.name.indexOf(serachName) > -1
        })
        switch (sortType) {
          case 1:
            personsFilter.sort((p1, p2) => {
              return p1.age - p2.age
            })
            break;
          case 2:
            personsFilter.sort((p1, p2) => {
              return p2.age - p1.age
            })
            break;
          default:
            // return;
        }
        return personsFilter
      }
    }
  }).$mount("#app")

效果: