vue的过滤器

news/2024/4/29 7:19:58/文章来源:https://www.cnblogs.com/funkyd/p/16672403.html

过滤器(Filters)是vue为开发者提供的功能,常用于文本的格式化。过滤器可以用在两个地方:插值表达式和v-bind属性绑定。

过滤器应该被添加在JavaScript表达式的尾部,由“管道符”进行调用,示例代码如下:

 

 

 过滤器的注意点:

  1.要定义到filters节点下,本质上是一个函数

  2.在过滤器函数中,一定要有return值

  3.在过滤器的形参中,就可以获取到管道符前面带出来的值

  4.如果全局过滤器和私有过滤器名字一致,此时按照“就近原则”调用的是“私有过滤器”

 

私有过滤器和全局过滤器

在filters节点下定义的过滤器,称为’私有过滤器‘,因为它只能在当前vm实例所控制的el区域使用。

如果希望在多个vue实例之间共享过滤器,则可以安装如下的格式定义全局过滤器:

    <script>//声明格式化时间的全局过滤器Vue.filter('dateFormat',function(time){//1对time进行格式化处理,得到YYYY-MM-DD HH:mm:ss格式的时间const dtStr = dayjs(time).format("YYYY-MM-DD HH:mm:ss")//2.把格式化后的时间return出去return dtStr})</script>

2.3连续调用多个过滤器

过滤器可以串联地进行调用,例如:

 

2.4过滤器传参

过滤器的本质是JavaScript函数,因此可以接收参数,格式如下:

<p>{{message | filter(arg1,arg2)}}</p>//过滤器处理函数的形参列表中
// 第一个参数,永远都是"管道符“前面待处理的值
//第二个参数开始,才是调用过滤器时传递过来的arg1和arg2参数
Vue.filter('filterA',(msg,arg1,arg2) =>{//过滤器的代码逻辑
})

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_6255.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

我的设计模式之旅 ⑦ 观察者模式

一个菜鸟的设计模式之旅,本程序实现观察者模式。使用C#、Go两门语言分别进行实现。程序创建一个全局游戏死亡事件通知,5个玩家、1个Boss,当任意一方死亡时,在场存活者都能收到阵亡者的消息。一个菜鸟的设计模式之旅,文章可能会有不对的地方,恳请大佬指出错误。 编程旅途是…

计算机网络性能指标之时延(delay)

概念 时延(delay 或 latency)是分组在网络的一端到另一端所需的时间,也叫延迟或迟延。如上图,发送时延、处理时延和排队时延、传播时延共同组成网络的时延。排队时延:分组在经过网络传输时,要经过许多路由器,分组进入路由器后进行排队(队列)等待路由器处理,这里就产生…

【Git总结大全】git操作从入门到实战(总结篇)

目录 1、Git 克隆指定分支的代码 2、把文件从本地推送到远程仓库&#xff08;亲测&#xff09; 3、删除冗余的本地或远程的操作分支 4、解决 “ Author identity unknown ”问题 5、git log 查看历史提交记录 6、git常用命令速查表 7、git分区原理&#xff08;超级详细&a…

谷歌数据洞察简介

谷歌数据洞察简介除了数据收集、数据转换和数据建模,数据科学家的另一个主要任务是讲故事的艺术。这是我们尝试以最引人注目的方式交流发现的见解。通常,我们通过仪表板执行此操作,因为 我们可以创建出色的视觉效果并根据数据主题自定义所有内容 被描绘并具有随着数据流入而…

Boyer-Moore 投票算法

Boyer-Moore 投票算法该算法的原始研究发表在 https://www.cs.utexas.edu/~moore/best-ideas/mjrty/ 该方法基本上非常简单,它依赖于这样一个事实,即如果一个元素出现超过 1/2 次,那么它在体积方面的贡献最大。 所以我们取一个元素,如果下一个元素与取的元素相同,我们将增…

【面试要点】判断企业基本信息——新型骗局“招聘转培训”

核心保护请一定要对个人的身份证与银行卡留有心眼,不要给任何人有中途拿取的操作。 手机不要离手,且一定要设置安全级别较高的密码。 时刻都要保持录音,无论是不是在签合同。招聘流程先是邀请你面试,但是在电话或者任何招聘网站提供的公司信息都与现场不符。 面试通过,他们…

TCP 的自然律

周一傍晚发了一则朋友圈&#xff1a; 放大配图&#xff0c;来自&#xff1a;How to transfer, share and send big files fast&#xff1a; ​ 我对此事的看法&#xff1a;“想高效利用庞大的资源需要的代价和资源规模的增加并不是线性的&#xff0c;而且指数的&#xff0c;下…

新一代网络请求库:python-httpx库

文章目录httpx库一、 概述1、 简介2、 命令行模式3、 快速开始3.1 get请求3.2 post请求3.2.1 表单3.2.2 文件3.2.3 JSON3.2.4 二进制3.3 响应处理3.4 流式响应3.5 cookie3.6 重定向3.7 超时和验证二、 客户端1、 特性2、 发出请求3、 其他配置4、 python_web5、 Request对象6、…

Python基础学习

文章目录1.1变量与运算符案例一&#xff1a;变量与运算符1.2选择结构与循环结构实训案例一&#xff1a;使用for循环输出满足条件的内容案例二&#xff1a;使用while循环1.3数据结构实战案例一&#xff1a;列表案例二&#xff1a;元组案例三&#xff1a;字典案例四&#xff1a;集…

《高级C/C++编译技术》01

Linux程序内存布局:启动程序的默认加载点是在链接阶段才添加的,通常放在程序内存映射的起始处(这是可执行文件和动态库之间的唯一区别)。启动代码有两种不同方式:crt0:“纯粹”的入口点,这是程序代码的第一部分,在内核控制下执行 crt1:更现代化的启动例程,可以在main…

某银行开发一个信用卡管理系统CCMS

38&#xff0e;现准备为某银行开发一个信用卡管理系统CCMS&#xff0c;该系统的基本功能为&#xff1a; (1)信用卡申请&#xff1a;非信用卡客户填写信用卡审请表&#xff0c;说明所要申请的信用卡类型及申 请者的蒸本信息&#xff0c;并提交给CCMS。如果信用卡申请者被…

Day08__异常

异常 Error和Exception捕获和抛出异常package exception;public class Demo01 {public static void main(String[] args) {int a=1;int b=0;//Ctrl+Alt+ttry {//try监控区域System.out.println(a/b);}catch (ArithmeticException e){//捕获异常System.out.println("除数不…

JAVA基础知识

JAVA基础知识目录IDEA快捷键简洁语法CtrlAltShift操作其他常用操作JAVA基础知识注释字面量变量数据类型关键字标识符类型转换自动类型转换表达式的自动类型转换强制类型转换运算符算数运算符符号做连接符自增自减运算符关系运算符和逻辑运算符三元运算符运算符优先级数组数组的…

Code For Better 谷歌开发者之声——Flutter - Google 开源的移动 UI 框架

写在前面 如今&#xff0c;人们都希望自己手机里的应用又漂亮的设计&#xff0c;顺滑的动画以及优异的功能&#xff0c;为了做到这些&#xff0c;开发者们需要在不妥协质量和性能的前提下&#xff0c;更快速地推进新功能的研发&#xff0c;这就是Flutter的核心。 文章目录写在前…

【转】VS2019 安装完成之后再安装其它功能模块组件安装

VisualStudio2019安装完成之后,由于开发需求需要安装其它模块或组件,点击工具,选择获取工具和功能,进行选择安装。 做个笔记随笔记录一下。选择需要的模块进行即可。【转自】https://www.cnblogs.com/jiayan1578/p/13665423.html

网络抖动了解

转自:https://blog.csdn.net/W_317/article/details/112801222, https://zhuanlan.zhihu.com/p/403614008 1.网络抖动 指网络中的延迟是指信息从发送到接收经过的延迟时间,一般由传输延迟及处理延迟组成; 抖动=最大延迟-最小延迟 如访问一个网站的最大延迟是20毫秒,最小延迟…

【转载】预测算法--时间序列(ARIMA)模型

ARIMA:AutoregressiveIntegratedMovingAverage model。自回归差分移动平均模型(p,d,q),可以说AR自回归模型,MA移动平均模型,ARMA自回归移动平均模型都是ARIMA的特殊形式. 时间序列模型一般性步骤包括:1. 数据平稳性检验;2. 确定模型参数;3. 构建时间序列模型;4.模型预测…

STM32二十:OLED和LCD

一.概述 1.OLED介绍 1 //OLED的显存2 //存放格式如下.3 //[0]0 1 2 3 ... 127 4 //[1]0 1 2 3 ... 127 5 //[2]0 1 2 3 ... 127 6 //[3]0 1 2 3 ... 127 7 //[4]0 1 2 3 ... 127 8 //[5]0 1 2 3 ... 127 9 //[6]0 1 2 3 ... 127 10 //[7]0 1 2 3 ... 127 …

一.xv6环境搭建

内容大致来源:1.视频教程:https://space.bilibili.com/16765968/channel/collectiondetail?sid=86878 2.文档:https://tarplkpqsm.feishu.cn/docs/doccnoBgv1TQlj4ZtVnP0hNRETd#W8iZmH一.windows升级为专业版注意:docker支持Windows 10 操作系统专业版,所以要升级windows…

【ASP.NET Core】自定义Session的存储方式

在开始今天的表演之前,老周先跟大伙伴们说一句:“中秋节快乐”。 今天咱们来聊一下如何自己动手,实现会话(Session)的存储方式。默认是存放在分布式内存中。由于HTTP消息是无状态的,所以,为了让服务器能记住用户的一些信息,就用到了会话。但会话数据毕竟是临时性的,不…