vue 列表模糊搜索

<template>
  <div>
    <h3>搜索列表</h3>
    <input type="text" placeholder="请输入搜索信息,姓名，年龄，性别，手机号" v-model="searchName">
    <ul>
      <li v-for="(p,index) in filterPersons" :key="personsKeys[index]">
        {{index+1}}) ---- ID:{{personsKeys[index]}}----姓名:{{p.name }} ----年龄：{{p.age}} ----性别：{{p.sex}}----电话：{{p.phone}}
      </li>
    </ul>
  </div>
</template>

<script>
  import shortId from 'shortid'
  export default {
    name: "ListRender",
    data(){
      return{
        persons: [
          {name:'张一',age:18,sex:'男',phone:'18919295531'},
          {name:'张二',age:28,sex:'男',phone:'18519295531'},
          {name:'刘三',age:38,sex:'女',phone:'18919295531'},
          {name:'刘四',age:48,sex:'男',phone:'18719295531'},
          {name:'刘五',age:58,sex:'男',phone:'18941995531'},
          {name:'刘一',age:18,sex:'男',phone:'18919295531'},
          {name:'李二',age:28,sex:'男',phone:'18919295531'},
          {name:'李三',age:38,sex:'女',phone:'18919295531'},
          {name:'李四',age:48,sex:'男',phone:'18919295531'},
          {name:'张五',age:58,sex:'男',phone:'18919295531'},
          {name:'王一',age:18,sex:'男',phone:'18919295531'},
          {name:'王二',age:28,sex:'男',phone:'18519295531'},
          {name:'王三',age:38,sex:'女',phone:'18919295531'},
          {name:'王四',age:48,sex:'男',phone:'18719295531'},
          {name:'王五',age:58,sex:'男',phone:'18941995531'},
          {name:'郑一',age:18,sex:'男',phone:'18919295531'},
          {name:'郑二',age:28,sex:'男',phone:'18919295531'},
          {name:'郑三',age:38,sex:'女',phone:'18919295531'},
          {name:'郑四',age:48,sex:'男',phone:'18919295531'},
          {name:'郑五',age:58,sex:'男',phone:'18919295531'}
        ],
        searchName:'',
        personsKeys:[]
      }
    },
    mounted(){
      this.personsKeys= this.persons.map(()=>shortId.generate());
    },
    computed:{
      filterPersons(){
        //1.获取数据
        let {searchName,persons}=this;
        // 2.取出数组中的数据
        let arr=[...persons];
        //3.过滤数组
        if(searchName.trim()){
         // searchName=searchName.trim()
          arr=persons.filter((p)=>p.name.indexOf(searchName)!==-1);
          if(arr.length<1){
            arr=persons.filter((p)=>p.sex==searchName);
            if(arr.length<1){
              arr=persons.filter((p)=>p.age-searchName==0);
              if(arr.length<1){
                arr=persons.filter((p)=>p.phone==searchName);
              }
            }
          }
        }
        return arr;
      }
    }
  }
</script>