vue-通过name进行数据过滤

<template>
<div>
    <h3>搜索列表</h3>
<input type="text" placeholder="请输入要搜索的名字" v-model="searchName"> 
<ul>
<li v-for="(person,index) in fileterPersons" :key="personsKeys[index]">
 {{personsKeys[index]}}--
{{person.name}}--
{{person.age}}--
{{person.sex}}--

</li>
</ul>

</div>
</template>
<script>
import shortid from 'shortid'
export default{
    name:"list",
    data(){
        return {
            searchName:'',
            persons:[
                {name:'张三',age:18,sex:'男'},
                {name:'李四2',age:128,sex:'男'},
                {name:'王五',age:138,sex:'男'},
                {name:'赵六',age:148,sex:'男'},
                {name:'田七',age:158,sex:'男'},
                {name:'邢八',age:168,sex:'男'},
                {name:'高久',age:178,sex:'男'},

                
                ],
               personsKeys:[],
        }
    },
    //生命周期方法
mounted(){
    this.personsKeys=this.persons.map(v=>shortid.generate())
},
computed:{
    //过滤
    fileterPersons(){
//1获取数据
let {searchName,persons}=this;
//2取出数组中的数据
let arr=[...persons];
//3.过滤数组
        if(searchName.trim()){
            arr=persons.filter((p)=>(p.name.indexOf(searchName)!==-1));
        }
        return arr;
    }
}
}
</script>
<style scoped>

ul{
    list-style: none;
}
ul li{
    padding:3px 0;
}
</style>

　　

思路：

1.要知道使用计算属性来进行操作,computed