Vue之列表过滤（二）

<div id="root">
        <ul>
            <h2>人员列表</h2>
            <input type="text" placeholder="输入进行模糊搜索" v-model="keyWord">
            <li v-for="(p,index) in filterPersons" :key="p.id">
                {{p.name}}-{{p.age}}--{{p.sex}}
            </li>
        </ul>
    </div>
    <script src="./vue.js"></script>
    <script>
        const vm = new Vue({
            el:"#root",
            data:{
                keyWord:'',
                persons:[
                    {id:"001",name:"马冬梅",age:19,sex:'女'},
                    {id:"002",name:"周冬雨",age:23,sex:'女'},
                    {id:"003",name:"周杰伦",age:22,sex:'男'},
                    {id:"004",name:"温兆伦",age:26,sex:'男'},
                ],
                //为了防止约搜索越少，需要新的数组
                filterPersons:[

                ]
            },
            watch:{
                keyWord:{
                    immediate:true,//为了初始化数据，需要在监视前就把数据填入
                    handler(val){
                        this.filterPersons = this.persons.filter((p)=>{
                        //如果包含这个字符串，那么就会返回-1
                        return p.name.indexOf(val) != -1;
                        })
                    }
                }
            }
        })
    </script>

呈现效果如下：