Vue列表过滤（计算属性和监听属性实现）

 filter： 过滤器

 indexOf()：是否包含某某值

    
    
人员列表
    
    

        

            {{p.name}}--{{p.age}}--{{p.sex}}
        
    

效果：存在问题，返回值时候，一遍遍赋值，值越来越少，最后检索不到。

 

 监听属性改良之后：

新添加了个接受过滤之后展示用的数组filPersons

修改了v-info中的filPersons

修改了监视器：完整的写了监视器，并且加了immediate: true，作用初始化调用一遍监视器，实现自动调用空字符串查询，将结果全部展现出来

    
    
人员列表
    
    

        

            {{p.name}}--{{p.age}}--{{p.sex}}
        
    

效果：

 使用计算属性实现该功能：

优点：

        1、这个回调函数两个时候调用，第一个：一开始时候就帮我们调用。第二个时候：计算的时候所依赖的数据发生变化

        2、keyWord怎么变不需要去监视，keyWord参与filPersons计算就可以了，只要keyWord发生变化，整个filPerson重新执行

    
    
人员列表
    
    

        

            {{p.name}}--{{p.age}}--{{p.sex}}