大家再使用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即可。

如何使用vuejs过滤器的更多相关文章

  1. vuejs过滤器

    结合管道符 | {{messageOne | capitalize}} capitalize 首字母大写 {{messageOne | uppercase}} uppercase 大写字母 {{mes ...

  2. VueJS学习资料大全

    参考:http://www.worktle.com/articles/2467/ 文档&社区 Vue.js官方网站(中文) :http://cn.vuejs.org/ Vue论坛:http:/ ...

  3. Vue开源项目库汇总

    最近做了一个Vue开源项目库汇总,里面集合了OpenDigg 上的优质的Vue开源项目库,方便移动开发人员便捷的找到自己需要的项目工具等,感兴趣的可以到GitHub上给个star. UI组件 elem ...

  4. Vue常用经典开源项目汇总参考-海量

    Vue常用经典开源项目汇总参考-海量 Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的 ...

  5. Vue常用开源项目汇总

    前言:Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还 ...

  6. Vue应用框架整合与实战--Vue技术生态圈篇

    实用框架以及工具 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 UI组件 Element-UI ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 ...

  7. vue各种插件汇总

    https://blog.csdn.net/wh8_2011/article/details/80497620(copy) Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) 是一 ...

  8. VUE插件大总结

    UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开 ...

  9. Vue相关开源项目库汇总

    https://github.com/opendigg/awesome-github-vue http://www.opendigg.com/tags/front-vue README.md 内容 U ...

随机推荐

  1. 手机访问本地php项目遇到的问题及解决

    做html5的本地应用要调试后台,学了下php 按照和连j2ee的时候一样,电脑发射wifi,ipconfig..等等  发现tomcat的可以访问,apache的不能访问,搜索好久,没找到解答, j ...

  2. 韩剧TV APP案例分析

    产品 选择产品:韩剧TV 版本:Android版 选择理由:节假日坐车回家时使用较多次数的APP,刚好国庆坐车回家时正在使用,所以选择了这款APP. 第一部分:调研.评测 第一次上手体验 刚打开APP ...

  3. 深入理解JAVA集合系列三:HashMap的死循环解读

    由于在公司项目中偶尔会遇到HashMap死循环造成CPU100%,重启后问题消失,隔一段时间又会反复出现.今天在这里来仔细剖析下多线程情况下HashMap所带来的问题: 1.多线程put操作后,get ...

  4. 解决java使用Runtime.exec执行linux复杂命令不成功问题

    最近要实现一个Java调用一个复杂shell命令实现数据同步,该命令有管道重定向的语句,结果硬是执行不成功,而且也没异常报出.经过一段时间的折腾终于解决了此问题,权当做备忘记录下来(重点在红色框中的“ ...

  5. Cannot open the disk 'D:\win7-ie8\Windows 7 x64.vmdk' or one of the snapshot

    使用机子过程中断电,开机后使用虚拟机提示[Cannot open the disk 'D:\win7-ie8\Windows 7 x64.vmdk' or one of the snapshot],找 ...

  6. [微软官方]FSUTIL

    Applies To: Windows Server 2003, Windows Vista, Windows Server 2008, Windows 7, Windows Server 2003 ...

  7. 微软自己的官网介绍 SSL 参数相关

    https://docs.microsoft.com/en-us/dotnet/api/system.security.authentication.sslprotocols?redirectedfr ...

  8. Thread的start和run的区别

    最近看到一个题目,代码如下: public static void main(String args[]) { Thread t = new Thread() { public void run() ...

  9. 【设计模式】—— 原型模式Prototype

    前言:[模式总览]——————————by xingoo 模式意图 由于有些时候,需要在运行时指定对象时哪个类的实例,此时用工厂模式就有些力不从心了.通过原型模式就可以通过拷贝函数clone一个原有的 ...

  10. Jvm dump介绍与使用(内存与线程)

    很多情况下,都会出现dump这个字眼,java虚拟机jvm中也不例外,其中主要包括内存dump.线程dump. 当发现应用内存溢出或长时间使用内存很高的情况下,通过内存dump进行分析可找到原因. 当 ...