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 相关文章推荐
javascript RadioButtonList获取选中值
Apr 09 Javascript
JavaScript 小型打飞机游戏实现原理说明
Oct 28 Javascript
jQuery拖拽插件gridster使用指南
Apr 21 Javascript
javascript实现uploadify上传格式以及个数限制
Nov 23 Javascript
细数JavaScript 一个等号,两个等号,三个等号的区别
Oct 09 Javascript
使用jquery.qrcode.js生成二维码插件
Oct 17 Javascript
jQuery实现二维码扫描功能
Jan 09 Javascript
js实现PC端和移动端刮卡效果
Mar 27 Javascript
ES6实现的遍历目录函数示例
Apr 07 Javascript
echarts实现词云自定义形状的示例代码
Feb 20 Javascript
layui table复选框禁止某几条勾选的实例
Sep 20 Javascript
Node.js学习之内置模块fs用法示例
Jan 22 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
虫族 Zerg 魔法科技
2020/03/14 星际争霸
php时间戳格式化显示友好的时间函数分享
2014/10/21 PHP
PHP微信开发之微信录音临时转永久存储
2018/01/26 PHP
PHP 计算两个特别大的整数实例代码
2018/05/07 PHP
javascript 面向对象编程基础 多态
2009/08/21 Javascript
根据鼠标的位置动态的控制层的位置
2009/11/24 Javascript
js操纵跨frame的三级联动select下拉选项实例介绍
2013/05/19 Javascript
JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法
2016/12/27 Javascript
vue.js 上传图片实例代码
2017/06/22 Javascript
微信小程序项目实践之验证码倒计时功能
2018/07/18 Javascript
webpack4.0 入门实践教程
2018/10/08 Javascript
深入理解es6块级作用域的使用
2019/03/28 Javascript
Vue打包部署到Nginx时,css样式不生效的解决方式
2020/08/03 Javascript
vue等两个接口都返回结果再执行下一步的实例
2020/09/08 Javascript
Python使用matplotlib绘制动画的方法
2015/05/20 Python
深入解析Python中的list列表及其切片和迭代操作
2016/03/13 Python
python爬虫爬取某站上海租房图片
2018/02/04 Python
快速解决pyqt5窗体关闭后子线程不同时退出的问题
2019/06/19 Python
使用python 写一个静态服务(实战)
2019/06/28 Python
python实现LBP方法提取图像纹理特征实现分类的步骤
2019/07/11 Python
Django之提交表单与前后端交互的方法
2019/07/19 Python
Django的用户模块与权限系统的示例代码
2019/07/24 Python
Python内存映射文件读写方式
2020/04/24 Python
安装pyecharts1.8.0版本后导入pyecharts模块绘图时报错: “所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 ”的解决方法
2020/08/18 Python
提高EJB性能都有哪些技巧
2012/03/25 面试题
保险公司晨会主持词
2014/03/22 职场文书
《黄山奇石》教学反思
2014/04/19 职场文书
副校长个人对照检查材料思想汇报
2014/10/04 职场文书
家长会开场白和结束语
2015/05/29 职场文书
画展观后感
2015/06/17 职场文书
终止解除劳动合同证明书
2015/06/17 职场文书
英语导游欢迎词
2015/09/30 职场文书
《文化苦旅》读后感:阅读,让人诗意地栖居在大地上
2019/12/24 职场文书
最新动漫情报:2022年7月新番定档超过30部, OVERLORD骨王第四季也在其中噢
2022/05/04 日漫
云服务器部署 Web 项目的实现步骤
2022/06/28 Servers
win10系统计算机图标怎么调出来?win10调出计算机图标的方法
2022/08/14 数码科技