<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>
