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


Posted in Javascript onJune 08, 2017

前言

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

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

该页面引入搜索栏组件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才可以生效。

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

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

在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即可。

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

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
node.js Web应用框架Express入门指南
May 28 Javascript
ionic js 复选框 与普通的 HTML 复选框到底有没区别
Jun 06 Javascript
微信+angularJS的SPA应用中用router进行页面跳转,jssdk校验失败问题解决
Sep 09 Javascript
js控制文本框禁止输入特殊字符详解
Apr 07 Javascript
vue2.0开发入门笔记之.vue文件的生成和使用
Sep 19 Javascript
基于vue cli重构多页面脚手架过程详解
Jan 23 Javascript
js装饰设计模式学习心得
Feb 17 Javascript
详解angular2 控制视图的封装模式
Dec 27 Javascript
javascript实现简易数码时钟
Mar 30 Javascript
简单了解JavaScript arguement原理及作用
May 28 Javascript
如何基于viewport vm适配移动端页面
Nov 13 Javascript
原生js实现弹窗消息动画
Nov 20 Javascript
了解VUE的render函数的使用
Jun 08 #Javascript
Node.js 使用命令行工具检查更新
Jun 08 #Javascript
在vue.js中抽出公共代码的方法示例
Jun 08 #Javascript
Ionic3 UI组件之autocomplete详解
Jun 08 #Javascript
jQuery+ajax实现局部刷新的两种方法
Jun 08 #jQuery
gulp解决跨域的配置文件问题
Jun 08 #Javascript
angular 用拦截器统一处理http请求和响应的方法
Jun 08 #Javascript
You might like
PHP 获取MySQL数据库里所有表的实现代码
2011/07/13 PHP
php设计模式之命令模式的应用详解
2013/05/21 PHP
PHP OPP机制和模式简介(抽象类、接口和契约式编程)
2014/06/09 PHP
PHP输出多个元素的排列或组合的方法
2017/03/14 PHP
php生成静态页面并实现预览功能
2019/06/27 PHP
PHP 判断字符串是中文还是英文, 或者是中英混合
2021/03/09 PHP
JS 添加千分位与去掉千分位的示例
2013/07/11 Javascript
鼠标移入移出事件改变图片的分辨率的两种方法
2013/12/17 Javascript
jquery实现非叠加式的搜索框提示效果
2014/01/07 Javascript
Script标签与访问HTML页面详解
2014/01/10 Javascript
Jquery 实现checkbox全选方法
2015/01/28 Javascript
jQuery简单获取键盘事件的方法
2016/01/22 Javascript
jQuery实现根据生日计算年龄 星座 生肖
2016/11/23 Javascript
Javascript仿京东放大镜的效果
2017/03/01 Javascript
vue双向绑定及观察者模式详解
2019/03/19 Javascript
[01:14]DOTA2亚洲邀请赛 ShowOpen
2015/02/07 DOTA
[00:33]2016完美“圣”典风云人物:BurNIng宣传片
2016/12/10 DOTA
bpython 功能强大的Python shell
2016/02/16 Python
使用Python读写及压缩和解压缩文件的示例
2016/07/08 Python
Python实现在线暴力破解邮箱账号密码功能示例【测试可用】
2017/09/06 Python
python实现人脸识别经典算法(一) 特征脸法
2018/03/13 Python
pytorch 输出中间层特征的实例
2019/08/17 Python
wxPython多个窗口的基本结构
2019/11/19 Python
美工的岗位职责
2013/11/14 职场文书
室内设计专业学生的自我评价分享
2013/11/27 职场文书
二手书店创业计划书
2014/01/16 职场文书
麦当劳辞职信范文
2014/01/18 职场文书
银行服务明星推荐材料
2014/05/29 职场文书
2014教师评职称工作总结
2014/11/10 职场文书
2014年监理工作总结范文
2014/11/17 职场文书
教您怎么制定西餐厅运营方案 ?
2019/07/05 职场文书
Nginx Rewrite使用场景及配置方法解析
2021/04/01 Servers
浅谈python数据类型及其操作
2021/05/25 Python
浅谈CSS不规则边框的生成方案
2021/05/25 HTML / CSS
python 判断文件或文件夹是否存在
2022/03/18 Python
Pandas实现DataFrame的简单运算、统计与排序
2022/03/31 Python