Vue中的过滤器(filter)
一、Vue中的过滤器是什么
过滤器（filter）是输送介质管道上不可缺少的一种装置,大白话，就是把一些不必要的东西过滤掉,过滤器实质不改变原始数据，只是对数据进行加工处理后返回过滤后的数据再进行调用处理，我们也可以理解其为一个纯函数。
Vue 允许你自定义过滤器，可被用于一些常见的文本格式化
ps: Vue3中已废弃filter
二、Vue中的过滤器如何用
vue中的过滤器可以用在两个地方：双花括号插值和 v-bind 表达式，过滤器应该被添加在 JavaScript表达式的尾部，由“管道”符号指示：
定义filter
在组件的选项中定义本地的过滤器
定义全局过滤器：
注意：当全局过滤器和局部过滤器重名时，会采用局部过滤器
过滤器函数总接收表达式的值 (之前的操作链的结果) 作为第一个参数。在上述例子中，capitalize 过滤器函数将会收到 message 的值作为第一个参数
过滤器可以串联
在这个例子中，filterA 被定义为接收单个参数的过滤器函数，表达式 message 的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数 filterB，将 filterA 的结果传递到 filterB 中。
过滤器是 JavaScript函数，因此可以接收参数：
这里，filterA 被定义为接收三个参数的过滤器函数。
其中 message 的值作为第一个参数，普通字符串 'arg1' 作为第二个参数，表达式 arg2 的值作为第三个参数
举个例子：
小结：
- 部过滤器优先于全局过滤器被调用
- 一个表达式可以使用多个过滤器。过滤器之间需要用管道符“|”隔开。其执行顺序从左往右
三、Vue中的过滤器应用场景
平时开发中，需要用到过滤器的地方有很多，比如单位转换、数字打点、文本格式化、时间格式化之类的等
比如我们要实现将30000 => 30,000，这时候我们就需要使用过滤器
Vue中的过滤器(filter)相关推荐
- Vue中的过滤器学习
在Vue中使用过滤器(Filters)来渲染数据是一种很有趣的方式.首先我们要知道,Vue中的过滤器不能替代Vue中的methods.computed或者watch,因为过滤器不改变真正的data,而 ...
- Vue中filters过滤器无效的原因
Vue中filters过滤器无效的原因 如果你的过滤器内部需要用到循环 请不要使用map函数代替for循环或者是foreach循环 如图: 因为过滤器本身需要一个return 把结果返回出去 然而ma ...
- 手动撸代码实现Vue管道符过滤器filter功能
前言 管道符的外观就是一根竖直线,也就是|.这个熟悉Linux的同学肯定不陌生了.而在Vue中,也常常能看见它的身影.比如Vue的过滤器: <div>我叫:{{name|nameFilte ...
- (十六)ATP应用测试平台——java应用中的过滤器Filter、拦截器Interceptor、参数解析器Resolver、Aop切面，你会了吗？
前言 过滤器Filter.拦截器Interceptor.参数解析器Resolver.Aop切面是我们应用开发中经常使用到的技术,到底该如何使用这些web附属功能, 本小节我们就分别介绍一下其各自的用法 ...
- Java中的过滤器Filter
本文用于学习所用,有不足及错误之处欢迎指出和补充. 目录 一:Filter简介 二:关于Filter (一)如何使用Filter进行过滤 (二)过滤器链 (FilterChain) (三)Filter ...
- Vue中的过滤器（管道）
过滤器:将指定的数据,按照一套流程过滤加工,最后返回一个过滤之后的值 注册局部过滤器 将过滤器写在filters配置项中的是局部过滤器,只供该vue匹配的容器使用 new Vue({el: '#roo ...
- 教女朋友学习 vue中的过滤器及其时间格式化
写在前面: 我是「扬帆向海」,这个昵称来源于我的名字以及女朋友的名字.我热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的. 这博客是对自己学习的一点点总结及记录,如果您对 Java.算法 感兴 ...
- serlvet中的过滤器filter
1.概念 过滤作用,对从客户端向服务器端发送的请求进行过滤,也可以对服务器端返回的响应进行处理.它使用户可以改变一个request和修改一个 response..Filter 不是一个servlet, ...
- jsp servlet中的过滤器Filter配置总结(转)
在Java web开发中常会使用到功能强大的过滤器,他毕竟能给我们带来很大的方便,但是针对过滤的资源我们需要详细的了解他们在web.xml中的配置信息.这个根据几种常用的不同情况进行了总结: 1.如果 ...
最新文章
- META Header
- 赴约北大，2019 CCF大数据与计算智能大赛正式启动
- java putnextentry_Java对zip格式压缩和解压缩
- 一种不通过UI给C4C自定义BO创建测试数据的方式
- 简述JQuery,Extjs,YUI,Prototype,Dojo等JS框架的区别和应用场景
- ACM竞赛、数论内容常用的定理（求解(a/b)%c，乘法逆元，费马小定理）
- C11标准库原子操作/无锁队列 stdatomic.h
- Xshell设置密钥登录CentOS6.5_64位（图文版）
- Android studio :Android finished with non-zero exit value 1
- perl 语言（数组）
- SSH免密登陆：Win登陆linux
- 2008 r2安装总是跳出 server sql_关于sql server 2008 r2 安装闪退问题解决办法
- 法语计算机相关书籍,法语网络计算机相关词汇
- studio无法重命名（can not rename root module）
- 预留度数Rx表达式的推导
- oracle rac密码,oracle rac如何修改密码，硬盘损坏如何恢复？
- ThinkPHP 5.0常用助手函数
- 印象笔记android,印象笔记(Evernote) Android SDK 更新
- 天黑请闭眼--杀吧专用（C#版 附源码）
- Java-命令行版中国象棋