在vue.js中使用过滤器的教程

序

当你再次使用vue做项目时，查询功能当然是必不可少的，所以你必须使用vue强大的过滤器。实际上，vue的两个内置属性filterBy和orderBy已经满足了一些要求，但她更大的魅力在于自定义过滤器(将在后面的文章中分享)，正好用在我最近的项目中。先给你看需求。如下图所示，这是一个地址簿页面。当我们在搜索栏输入关键词时，我们需要显示相应的员工。同时还要去掉A、B等字母索引，输入的关键词可以是中文，也可以是拼音。

搜索栏组件搜索栏和联系人组件用户列表被引入到这个页面。这个搜索栏组件非常简单，因为我们查询的参数是动态的，所以我们只需要在vue上挂载一个v-model，然后它就是相对于这个页面的一个子组件，所以需要使用道具进行亲子值传递，所以我们需要用道具来接收，简单的写下组件，这样大家就可以理解它的含义了。

//组件搜索-barinput类型=' search ' v-model=' okr _ owner '/prop s : { okr _ owner 3360 { type : string } }//通讯簿页面模板搜索-bar : okr _ owner . sync=' key _ word '/search-bar user-list : filter _ key=' key _ word '/user-list/template//组件用户-list Li v-for=' single _ user in user _ list . members |按filter _ in键筛选u _ name ' ' okr _ owner ' | Order by ' okr _ owner ' ' props : { filter _ flag : { type : boolean }，filter _ key : { type : string } }然后我们需要将这个搜索栏子组件引入到这个页面中，这里我使用sync。因为道具只能从父代传递到子代，不能从子代传递到父代，所以我们参考了上面的两个组件，也就是说搜索栏组件中的数据需要在联系人组件中使用，所以我们需要一个字段(key_word)来沟通两者。当我们不写sync时，我们可以看到父组件确实将值传递给了子组件。但是子组件中的okr_owner在变更后还没有传递到父组件中的key_word，所以contact组件无法接受数据源，所以我们需要先给他添加sync(双向绑定、父子、子父)，contact组件中的筛选器才能生效。

在用户列表组件中，我们需要遍历联系人列表，并使用filter_key将其传递给组件。和搜索栏组件一样，也是由道具接收，要过滤的内容插入其中。

FilterBy是返回过滤后的数组，orderBy是进行排序，前者是使用filterBy的一个键(字段)，在xxx中指的是搜索字段，这里需要注意的是，in后面必须跟的是obj中的键，因为我们的需求是保证输入的汉字和拼音都可以查询。因此，in后面是okr_owner和user.u_name(这是vue渲染的数据，我们显示联系人里面用的是u_name，okr_owner用的是拼音)，数据结构附后。至于搜索时如何去掉这些字母索引，我们只需要在通讯录页面的用户列表中添加一个字段，然后使用watch收听key_word即可。

摘要

以上就是本文的全部内容。希望本文的内容能给你的学习或工作带来一些帮助。有问题可以留言交流。谢谢你的支持。