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实现页面自适应
Jan 19 Javascript
javascript中获取下个月一号,是星期几
Jun 01 Javascript
javascript使用smipleChart实现简单图表
Jan 02 Javascript
javascript鼠标右键菜单自定义效果
Dec 08 Javascript
在 Angular 中实现搜索关键字高亮示例
Mar 21 Javascript
JavaScript之RegExp_动力节点Java学院整理
Jun 29 Javascript
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
Aug 18 jQuery
js封装成插件的步骤方法
Sep 11 Javascript
Node解决简单重复问题系列之Excel内容的获取
Jan 02 Javascript
Vue实现点击按钮复制文本内容的例子
Nov 09 Javascript
微信小程序实现手指拖动选项排序
Apr 22 Javascript
Vue+element+cookie记住密码功能的简单实现方法
Sep 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
山进SANGEAN ATS-909X电路分析
2021/03/02 无线电
新安装的MySQL数据库需要注意的安全知识
2008/07/30 PHP
php获取json数据所有的节点路径
2015/05/17 PHP
php中session_id()函数详细介绍,会话id生成过程及session id长度
2015/09/23 PHP
iOS10推送通知开发教程
2016/09/19 PHP
PHP parse_ini_file函数的应用与扩展操作示例
2019/01/07 PHP
基于PHP+Jquery制作的可编辑的表格的代码
2011/04/10 Javascript
ie8本地图片上传预览示例代码
2014/01/12 Javascript
js实例属性和原型属性示例详解
2014/11/23 Javascript
angular简介和其特点介绍
2015/01/29 Javascript
JS建造者模式基本用法实例分析
2015/06/30 Javascript
基于insertBefore制作简单的循环插空效果
2015/09/21 Javascript
Vue.js创建Calendar日历效果
2016/11/03 Javascript
关于AngularJs数据的本地存储详解
2017/01/20 Javascript
基于VuePress 轻量级静态网站生成器的实现方法
2018/04/17 Javascript
通过微信公众平台获取公众号文章的方法示例
2019/12/25 Javascript
Quasar Input:type=&quot;number&quot; 去掉上下小箭头 实现加减按钮样式功能
2020/04/09 Javascript
微信小程序实现弹框效果
2020/05/26 Javascript
JavaScript语法约定和程序调试原理解析
2020/11/03 Javascript
vue+element table表格实现动态列筛选的示例代码
2021/01/14 Vue.js
Python基于Tkinter实现的记事本实例
2015/06/17 Python
快速解决pandas.read_csv()乱码的问题
2018/06/15 Python
numpy ndarray 按条件筛选数组,关联筛选的例子
2019/11/26 Python
django框架auth模块用法实例详解
2019/12/10 Python
Python爬虫实现HTTP网络请求多种实现方式
2020/06/19 Python
如何用Matplotlib 画三维图的示例代码
2020/07/28 Python
Ref与out有什么不同
2012/11/24 面试题
工作失误检讨书范文大全
2014/01/13 职场文书
社区科普工作方案
2014/06/03 职场文书
旅游与酒店管理专业求职信
2014/07/21 职场文书
死亡证明书样本说明
2014/10/18 职场文书
2014年餐厅服务员工作总结
2014/11/18 职场文书
中秋节寄语2015
2015/03/24 职场文书
MySQL 8.0 Online DDL快速加列的相关总结
2021/06/02 MySQL
JavaScript 数组去重详解
2021/09/15 Javascript
Java 在线考试云平台的实现
2021/11/23 Java/Android