vue---computed实现列表搜索及排序

搜索及排序

<div id='app'>
    搜索<input type="text" v-model="value" placeholder="请输入名字">
    <button @click="sort=1">升序</button>
    <button @click="sort=2">降序</button>
    <button @click="sort=0">原顺序</button>
    <ul>
      <li v-for="item in filper" :key="item.id">{
   
   {item.name}}--{
   
   {item.age}}--{
   
   {item.sex}}</li>
    </ul>
  </div>

  <script>
    const app = new Vue({
    
    
      el: '#app',
      data: {
    
    
        persons: [{
    
    
          id: '001',
          name: '马冬梅',
          age: 25,
          sex: '女'
        },
        {
    
    
          id: '002',
          name: '冬青',
          age: 20,
          sex: '男'
        },
        {
    
    
          id: '003',
          name: '周杰伦',
          age: 35,
          sex: '男'
        },
        {
    
    
          id: '004',
          name: '林俊杰',
          age: 40,
          sex: '男'
        }],
        sort: 0,
        value: '',
      },
      computed: {
    
    
        filper() {
    
    
          const arr = this.persons.filter(item => {
    
    
            return item.name.indexOf(this.value) !== -1
          });
          if (this.sort) {
    
    
            arr.sort((p1, p2) => {
    
    
              return this.sort === 1 ? p1.age - p2.age : p2.age - p1.age
            })
          }
          return arr
        }
      }
    })
  </script>