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 相关文章推荐
IE和firefox浏览器的event事件兼容性汇总
Dec 06 Javascript
给jQuery方法添加回调函数一款插件的应用
Jan 21 Javascript
javascript作用域和闭包使用详解
Apr 25 Javascript
javascript的BOM汇总
Jul 16 Javascript
jquery中取消和绑定hover事件的实现代码
Jun 02 Javascript
Vue实现自带的过滤器实例
Mar 09 Javascript
React组件生命周期详解
Jul 03 Javascript
js数组实现权重概率分配
Sep 12 Javascript
Angular4.0中引入laydate.js日期插件的方法教程
Dec 25 Javascript
JS实现获取自定义属性data值的方法示例
Dec 19 Javascript
原生js+ajax分页组件
Jan 30 Javascript
vue 使用饿了么UI仿写teambition的筛选功能
Mar 01 Vue.js
了解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读取html并截取字符串的简单代码
2009/11/30 PHP
基于PHP开发中的安全防范知识详解
2013/06/06 PHP
关于laravel-admin ueditor 集成并解决刷新的问题
2019/10/21 PHP
jQuery(1.6.3) 中css方法对浮动的实现缺陷分析
2011/09/09 Javascript
js防止页面被iframe调用的方法
2014/10/30 Javascript
jquery选择器需要注意的问题
2014/11/26 Javascript
超级简单的jquery操作表格方法
2014/12/15 Javascript
jQuery实现删除li节点的方法
2016/12/06 Javascript
js闭包用法实例详解
2016/12/13 Javascript
超全面的javascript中变量命名规则
2017/02/09 Javascript
vue.js如何更改默认端口号8080为指定端口的方法
2017/07/14 Javascript
JS实现可针对算术表达式求值的计算器功能示例
2018/09/04 Javascript
Vue2.x Todo之自定义指令实现自动聚焦的方法
2019/01/08 Javascript
ES6对象操作实例详解
2020/05/23 Javascript
[00:43]TI7不朽珍藏III——幽鬼不朽展示
2017/07/15 DOTA
python实现获取客户机上指定文件并传输到服务器的方法
2015/03/16 Python
Python 逐行分割大txt文件的方法
2017/10/10 Python
Python实现的随机森林算法与简单总结
2018/01/30 Python
python数字图像处理之高级形态学处理
2018/04/27 Python
基于sklearn实现Bagging算法(python)
2019/07/11 Python
基于python实现的百度音乐下载器python pyqt改进版(附代码)
2019/08/05 Python
Python Django 添加首页尾页上一页下一页代码实例
2019/08/21 Python
python sorted方法和列表使用解析
2019/11/18 Python
Python生成个性签名图片获取GUI过程解析
2019/12/16 Python
解决tensorboard多个events文件显示紊乱的问题
2020/02/15 Python
Python自省及反射原理实例详解
2020/07/06 Python
HTML5实现音频和视频嵌入的方法
2018/08/22 HTML / CSS
深圳茁壮笔试题
2015/05/28 面试题
体育专业个人的求职信范文
2013/09/21 职场文书
补充协议书范本
2014/04/23 职场文书
诚信承诺书模板
2014/05/26 职场文书
环保公益策划方案
2014/08/15 职场文书
离婚协议书范文2014(夫妻感情破裂)
2014/12/14 职场文书
员工工作表现自我评价
2015/03/06 职场文书
电影建国大业观后感
2015/06/01 职场文书
《蟋蟀的住宅》教学反思
2016/02/17 职场文书