VUE中过滤遍历

VUE中过滤遍历

先用v-for遍历后再通过computed钩子来计算过滤

（使用了
.trim()过滤空格
.filter（）过滤不满足括号后的条件，留下满足条件的
.indexOf（）检索的字符串值有没有出现，没有出现则该方法返回 -1
）

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

<script>
    import shortId from 'shortid'

    export default {
        name: "ListRenderTwo",
        data(){
            return{
                searchName:'',
                persons:[
                    {name:'张三',age:'18',sex:'男'},
                    {name:'李四',age:'28',sex:'女'},
                    {name:'王五',age:'38',sex:'男'},
                    {name:'赵六',age:'48',sex:'女'},
                    {name:'李七',age:'58',sex:'男'},
                    {name:'张三三',age:'18',sex:'男'},
                    {name:'李四四',age:'28',sex:'女'},
                    {name:'王五五',age:'38',sex:'男'},
                    {name:'赵六六',age:'48',sex:'女'},
                    {name:'李七七',age:'58',sex:'男'}
                    ],
                personsKeys:[]
            }
        },
        mounted() {
            this.personsKeys = this.persons.map(v=>shortId.generate());
        },
        computed:{
            filterPersons(){
                //1 获取数据
                let {searchName,persons} = this;
                //2 取出数组中的数据
                let arr = [...persons];
                //3 过滤数据  trim()方法删除前后空格
                if(searchName.trim()){
                    //filter方法：过滤不满足括号后的条件，留下满足条件的
                    arr = persons.filter(p=>p.name.indexOf(searchName) !== -1)
                }
                //4 返回新的数组
                return arr;
            }
        }
    }
</script>

<style scoped>
ul{
    list-style: none;
}
    ul>li{
        padding: 4px 0;
    }

</style>