Vue2中过滤器的用法详解
创始人
2024-03-30 01:03:42
0

目录

一、过滤器的概念

二、过滤器的使用位置

三、过滤器的分类

1、全局过滤器

2、本地过滤器

四、过滤器应用实例

1、使用过滤器实现省略号

2、使用过滤器处理时间戳

五、Vue3中已废弃过滤器 


过滤器是vue中的一个特性,作用是用于对文本进行格式化的作用。分为全局过滤器和私有过滤器(本地过滤器)2种。这篇文章介绍了Vue2中的过滤器filter使用方法及注意说明,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下。

一、过滤器的概念

过滤器(Filters)是 vue 为开发者提供的功能,常用于文本的格式化。

过滤器可以用在两个地方:插值表达式和 v-bind 属性绑定。

过滤器应该被添加在 JavaScript 表达式的尾部,由“管道符”进行调用。

注意:在vue 1.0中有内置的过滤器,在2.0中去掉了内置过滤器,只有自定义过滤器 

二、过滤器的使用位置

过滤器只能应用在两个地方:双花括号插值v-bind表达式(后者从 2.1.0+ 开始支持)。例如:

{值 | 过滤器的名称}}-->
{{3 | addZero}}
11

关于Vue2中的过滤器

👉 什么是vue的过滤器  

过滤器可以通俗理解成是一个特殊的方法,用来加工数据的。

比如枚举值可以使用过滤器:如 1 2 3 4 对应 成功 失败 进行中 已退回 比如价格后面跟个过滤器,将价格格式化成小数点两位 比如时间格式化等,又比如可以过滤聊天中的某些脏话。


👉 如何写过滤器?


过滤器

过滤器基本使用

{值 | 过滤器的名称}}-->

{{content|contentFilter}}

11

过滤器接收参数

{{ num1| add(num2,num3)}}

运行结果:

三、过滤器的分类

过滤器分为以下两种类型:

1、全局过滤器

多个 vue 实例之间共享过滤器,就可以定义全局过滤器

示例代码如下:


过滤器
{值 | 过滤器的名称}}-->
{{3 | addZero}}
{{15 | addZero}}
11
15

运行效果:

关于全局过滤器的说明

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

2、本地过滤器

在 filters 节点下定义的过滤器,称为“私有过滤器”,因为它只能在当前 vm 实例所控制的 el 区域内使用。——要定义到 filters 节点下,本质是一个函数

 (1)在插值表达式或v-bind属性中使用 管道符

(2)在vue实例的 filters 节点中定义过滤方法 

 

示例代码如下: 



过滤器

{值 | 过滤器的名称}}-->
{{3 | addZero}}
{{15 | addZero}}
11
15
原始值:3.1415926,过滤后的值:{{3.1415926 | roundNum}}
原始值:3.1415926,过滤后的值:{{3.1415926 | roundNumWithPara(3)}}

运行效果:

💠 过滤器的注意点:

👉🏻 当全局过滤器和局部过滤器重名时,会采用局部过滤器。——即此时会按照“就近原则”,调用的是”私有过滤器“。

👉🏻 局部过滤器优先于全局过滤器被调用。

👉🏻 一个表达式可以使用多个过滤器。过滤器之间需要用管道符“|”隔开。其执行顺序从左往右。

👉🏻 在过滤器函数中,一定要有 return 值。

👉🏻 在过滤器的形参中,可以获取到“管道符”前面待处理的那个值。

四、过滤器应用实例

1、使用过滤器实现省略号

代码示例如下:


使用过滤器实现省略号
{{msg | toShowEllipsis(6)}}

运行效果:

2、使用过滤器处理时间戳

代码示例如下:


使用过滤器处理时间戳

当前时间:{{curTime | toTimeStamp }}

运行效果:

五、Vue3中已废弃过滤器 

👋🏻 注意:filter方法在vue3中已被废除 

vue3要精简代码,并且filter功能重复,filter能实现的功能,methods和计算属性基本上也可以实现。把filter这方面的vue源码给删掉,这样更加方便维护。

例如

使用 computed 实现



使用methods实现


相关内容

热门资讯

银河麒麟V10SP1高级服务器... 银河麒麟高级服务器操作系统简介: 银河麒麟高级服务器操作系统V10是针对企业级关键业务...
【NI Multisim 14...   目录 序言 一、工具栏 🍊1.“标准”工具栏 🍊 2.视图工具...
不能访问光猫的的管理页面 光猫是现代家庭宽带网络的重要组成部分,它可以提供高速稳定的网络连接。但是,有时候我们会遇到不能访问光...
Android|无法访问或保存... 这个问题可能是由于权限设置不正确导致的。您需要在应用程序清单文件中添加以下代码来请求适当的权限:此外...
AWSECS:访问外部网络时出... 如果您在AWS ECS中部署了应用程序,并且该应用程序需要访问外部网络,但是无法正常访问,可能是因为...
北信源内网安全管理卸载 北信源内网安全管理是一款网络安全管理软件,主要用于保护内网安全。在日常使用过程中,卸载该软件是一种常...
AWSElasticBeans... 在Dockerfile中手动配置nginx反向代理。例如,在Dockerfile中添加以下代码:FR...
AsusVivobook无法开... 首先,我们可以尝试重置BIOS(Basic Input/Output System)来解决这个问题。...
ASM贪吃蛇游戏-解决错误的问... 要解决ASM贪吃蛇游戏中的错误问题,你可以按照以下步骤进行:首先,确定错误的具体表现和问题所在。在贪...
​ToDesk 远程工具安装及... 目录 前言 ToDesk 优势 ToDesk 下载安装 ToDesk 功能展示 文件传输 设备链接 ...