如何使用vuejs过滤器

你们再使用vue作项目时，查询功能固然必不可少，这就得使用vue强大的filter啦。其实vue内置的两个属性filterBy和orderBy已经能知足部分需求了，可是她更大的的魅力在于自定义filter（以后的文章中会分享），正好我最近作的项目中用到了这个。先给你们看下需求吧。以下图，这是一个通信录页面，当咱们在搜索栏中输入关键字时须要展现相应的员工，同时还得去掉A、B这样的字母索引，而且输入的关键字能够是中文也能够是拼音。

    

 

 

 该页面引入搜索栏组件search-bar以及联系人组件user-list,这个搜索栏组件要作的事很简单，由于咱们查询的这个参数是动态的，因此只须要在vue上挂载一个v-model便可，而后它相对于这个页面来讲是子组件，父子传值就得用props，因此还要用props接收一下，简单写下该组件你们看明白意思便可。

// 组件search-bar
<input type="search" v-model="okr_owner"/>

props: {
        okr_owner: {
            type: String
        }
}

// 通信录页面
<template>
    <search-bar :okr_owner.sync="key_word"></search-bar>
    <user-list :filter_key="key_word"></user-list>
</template>

// 组件 user-list
<li v-for="single_user in user_list.members | filterBy filter_key in 'user.u_name' 'okr_owner' | orderBy 'okr_owner'">
 props: {
        filter_flag: {
            type: Boolean
        },
        filter_key:{
            type: String
        }
}

 

而后咱们须要在该页面引入这个搜索栏子组件,这里我用到了sync，由于props只能父传子，不能子传父，可是咱们这上面引用了两个组件，就是说搜索栏组件中的data要拿到联系人组件中来用，因此须要一个字段(key_word)将二者沟通起来，当咱们不写sync时你们能够看到，父的确传值给子组件了，可是子组件中的okr_owner变化以后并无传给父组件中的key_word，这样联系人组件就接受不到数据源，因此咱们须要给他加上sync（双向绑定，父传子和子传父），联系人组件中的filter才能够生效。

在user-list组件中咱们须要遍历联系人列表，filter_key用来传给该组件，和搜索栏组件同样，也用props接收一下，而且在里面插入要过滤的内容，

filterBy是返回过滤后的数组，orderBy是排序，前者的使用方法是filterBy 一个key(字段)，in xxx 就是指搜索字段，这里须要注意的是in后面跟的必须是obj里面的key，由于咱们的需求是同时保证输入汉字或者拼音都能查询，因此in后面跟的是okr_owner和user.u_name(这是vue渲染的数据，咱们展现该联系人用的是里面的u_name，okr_owner则为拼音)，下面附上数据结构。对于在搜索时如何去掉这些字母索引，咱们只须要在通信录页面中的<user-list>加入一个字段，而后使用watch来监听一下key_word便可。