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实现动态增加删除表格行(兼容IE/FF)
Apr 02 Javascript
使用JQuery和s3captche实现一个水果名字的验证
Aug 14 Javascript
javascript中String类的subString()方法和slice()方法
May 24 Javascript
jquery遍历筛选数组的几种方法和遍历解析json对象
Dec 13 Javascript
JS+CSS实现模仿浏览器网页字符查找功能的方法
Feb 26 Javascript
JS实现仿QQ效果的三级竖向菜单
Sep 25 Javascript
浅析JS中对函数function的理解(基础篇)
Oct 14 Javascript
简单的js计算器实现
Oct 26 Javascript
JavaScript实现图片拖曳效果
Sep 08 Javascript
jQuery实现判断上传图片类型和大小的方法示例
Apr 11 jQuery
Vue.js 中的实用工具方法【推荐】
Jul 04 Javascript
js实现点击按钮随机生成背景颜色
Sep 05 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
Windows下的PHP5.0安装配制详解
2006/09/05 PHP
攻克CakePHP系列一 连接MySQL数据库
2008/10/22 PHP
PHP的pcntl多进程用法实例
2015/03/19 PHP
typecho插件编写教程(一):Hello World
2015/05/28 PHP
php解析xml 的四种简单方法(附实例)
2016/07/11 PHP
PHP集成环境XAMPP的安装与配置
2018/11/13 PHP
PHP实现简单登录界面
2019/10/23 PHP
基于jquery的复制网页内容到WORD的实现代码
2011/02/16 Javascript
Js实现自定义右键行为
2015/03/26 Javascript
jQuery检测某个元素是否存在代码分享
2015/07/09 Javascript
使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法
2016/07/07 Javascript
文本框只能输入数字的js代码(含小数点)
2016/07/10 Javascript
快速移动鼠标触发问题及解决方法(ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave)
2016/08/29 Javascript
解析NodeJs的调试方法
2016/12/11 NodeJs
让nodeJS支持ES6的词法----babel的安装和使用方法
2017/07/31 NodeJs
解决JSON.stringify()自动将中文转译成unicode的问题
2018/01/05 Javascript
微信小程序模板消息推送的两种实现方式
2019/08/27 Javascript
JavaScript生成一个不重复的ID的方法示例
2019/09/16 Javascript
javascript实现弹幕墙效果
2019/11/28 Javascript
Vue axios 跨域请求无法带上cookie的解决
2020/09/08 Javascript
Echarts在Taro微信小程序开发中的踩坑记录
2020/11/09 Javascript
python进阶教程之词典、字典、dict
2014/08/29 Python
Python SMTP配置参数并发送邮件
2020/06/16 Python
使用CSS3实现SVG路径描边动画效果入门教程
2019/10/21 HTML / CSS
HTML5 Canvas draw方法制作动画效果示例
2013/07/11 HTML / CSS
Foot Locker意大利官网:全球领先的运动鞋和服装零售商
2017/05/30 全球购物
大学新生军训个人的自我评价
2013/10/03 职场文书
工作人员思想汇报
2014/01/09 职场文书
本科生导师推荐信范文
2014/05/18 职场文书
工作经常出错的检讨书
2014/09/13 职场文书
2014光棍节大学生联谊活动方案
2014/10/10 职场文书
六一儿童节主持开场白
2015/05/28 职场文书
2016幼儿园教师节新闻稿
2015/11/25 职场文书
初中教务主任竞聘演讲稿(范文)
2019/08/20 职场文书
导游词之珠海轮廓
2019/10/25 职场文书
mysql中varchar类型的日期进行比较、排序等操作的实现
2021/11/17 MySQL