vue的数组 模糊查询与排序内容

首先我们回忆一下数组的遍历

<ul>
   <li v-for="(item,index) in personList" :key="item.id">
       <!-- key是不存在的，就是用来给dom树遍历的 -->
       idnex:{{ index }},id:{{ item.id }},名字:{{ item.name }} 年龄{{item.age}}
   </li>
 </ul>
 遍历对象
 <ul>
     <li v-for="(value,k) in car" :key="k">
         对象名{{k}}--对象值{{value}}
     </li>
 </ul>

我们现在有两个需求，给personlist模糊查询和升序降序排序

personLists:[
       {
            id:001,
            name:"马冬梅",
            age:11
        },
        {
            id:002,
            name:"马保国",
            age:32
        },
        {
            id:003,
            name:"马蜂窝",
            age:22
        },
        {
            id:004,
            name:"吴钱",
            age:12
        },
   ]

对于模糊查询我们同样有两种方法，通过computed计算属性和watch检测属性来设定

<input type="text" placeholder="请输入名字，模糊查询名字" v-model="keyword" @keyup="showInfo">

watch:{//用监听器的方法来模糊查询
    'keyword':{
           immediate:true,//需要找一遍空值才显示，这里的意思是初始化的时候执行这个监听一次
           handler(val){
               this.personList=this.personLists.filter((p)=>{  
               //filter过滤的意思，这个是过滤函数，将每一项符合结果的值返回到personList                        
                   return p.name.indexOf(val)!==-1
               })
           } 
       },
  },

用计算属性实现，所谓计算属性，自己百度一下，或者看一下我的推文

computed:{
      filPerson(){//用计算属性来模糊查询，并通过改动排序属性来排序
          const arr=this.personLists.filter((p)=>{  
          //filter过滤的意思，这个是过滤函数，将每一项符合结果的值返回到arr                        
              return p.name.indexOf(this.keyword)!==-1
          })
          
          return arr;
      }
 },

至于降序和升序，我们可以设定一个值为sortType，sortType为0原顺序 1降序 2升序，通过这种方法，让计算属性根据sortType的变化重新对数组的内容进行排列

computed:{
  filPerson(){//用计算属性来模糊查询，并通过改动排序属性来排序
      const arr=this.personLists.filter((p)=>{  //filter过滤的意思，这个是过滤函数，将每一项符合结果的值返回到                        
          return p.name.indexOf(this.keyword)!==-1
      })
      //判断一下是否需要排序
      let t=0;
      if(this.sortType !==0){
      //如果要得到自己想要的结果，不管是升序还是降序，就需要提供比较函数了
      //该函数比较两个值的大小，然后返回一个用于说明这两个值的相对顺序的数字。
      //比较函数应该具有两个参数 a 和 b，其返回值如下：
      //若 a 小于 b，即 a - b 小于零，在排序后的数组中 a 应该出现在 b 之前,则返回一个小于零的值，数组将按照升序排列。
      //若 a 等于 b，则返回 0。
      //若 a 大于 b, 即 a - b 大于零，则返回一个大于零的值，数组将按照降序排列。
          arr.sort((p1,p2)=>{
              console.log("id的值"+t+"这个是p1"+p1.name+"这个是p2"+p2.name);
              t++;
              return this.sortType===1 ?p2.age-p1.age: p1.age-p2.age
          })
      }
      return arr;
  }
},