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