Vue过滤器

news2025/1/14 18:14:07

Vue过滤器

  • 1. 概述
  • 2. 全局过滤器与局部过滤器
    • 2.1 过滤器参数
    • 2.2 过滤器的串联

1. 概述

在Vue.js中,过滤器主要用于文本的格式化,或者组件数据的过滤与排序等。从Vue2.0.0版本开始,内置的过滤器已经被删除,需要自己编写。

2. 全局过滤器与局部过滤器

过滤器的本质上是一个函数,与自定义指令相似,过滤器也分为全局过滤器和局部过滤器。全局过滤器使用Vue.filter()方法来注册,该方法接受两个参数,第一参数是过滤器的ID(即名字),第二个参数是一个函数对象,过滤器要实现的功能在这个函数中定义。语法形式如下:
Vue.filter(id, [definition])
局部过滤器是在Vue实例的选项对象中使用filters选项来注册。
下面编写一个将字符串首字符转换为大写字母的全局过滤器。
在这里插入图片描述
如果换成局部过滤器,编写形式如下:
在这里插入图片描述
要注意的是:

  1. 当全局过滤器和局部过滤器重名时,会采用局部过滤器。
  2. 与自定义指令一样,全局过滤器可以在任何Vue实例的模板中使用,而局部过滤器只能在该实例绑定的视图中使用。
    过滤器可以用在两个地方:双花括号插值和v-bind表达式使用时通过管道符|添加到表达式的尾部使用。
    在这里插入图片描述
    不要去尝试在其他指令的表达式中使用,没有结果还会报错。

2.1 过滤器参数

过滤器函数总是接受表达式的值作为第一个参数,如{{message|capitalize}},message的值将作为capitalize过滤器函数的第一个参数。过滤器的本质上是一个JavaScript函数,自然也可以接受多个参数。
下面编写一个为表达式的值添加前后缀的过滤器。
在这里插入图片描述
filename的值作为format过滤器的第一个参数,普通字符串’vue’作为format过滤器的第二个参数,表达式suffix的值作为format过滤器的第三个参数,最终的输出结果为vue-filters.js
如果过滤器函数需要接受任意多个参数,可以使用ECMAScript6中引入的rest参数
在这里插入图片描述
当然,不建议把过滤器的功能做的很复杂,这违背了过滤器的初衷,毕竟在Vue.js中还有方法、计算属性、监听器等各种特性。

2.2 过滤器的串联

在这里插入图片描述
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【OpenGL学习】绘制三角形

绘制三角形 上节中完成了窗口的绘制,这节我们主要实现在窗口中完成一个最简单的三角形的绘制,同样,要完成一个三角形的绘制,需要以下内容: Vertex Array 存放顶点数据的数组(实际上存放的是顶点数据的指针…

Imagination与Synopsys携手加快移动端与数据中心3D可视化技术的发展

IMG CXT GPU与Synopsys Fusion QIK一同优化移动光追应用的PPA中国北京 - 2023年1月13日- Imagination Technologies与领先的电子设计自动化(EDA)解决方案和服务商Synopsys一起为移动光追解决方案打造一个更加快速、高效的设计流程。光追技术通过模仿光线…

1.1、操作系统的概念、功能和目标

整体框架 1、操作系统的层次结构 对于操作系统: 负责管理协调硬件、软件登计算机资源的工作为上层的应用程序、用户提供简单易用的服务操作系统是系统软件,而不是硬件 对于裸机(纯硬件): 例如:CPU、内存…

2023年音视频开发前景如何?音视频开发需要掌握哪些技术?

引言 音视频开发这一行业其实已经出现了有些年头了,但为什么现在就突然火爆了起来呢?实则就是两个字,需求;在这两年中,人们将工作、生活、学习相关的作业都其变成线上化,所以短视频、超高清视频和实时音视频…

【C++】STL容器:list的模拟实现

一、list的结构 1. list的节点 list的底层是一个带头双向循环链表&#xff0c;但list本身和list的节点是不同的结构&#xff0c;需要分开实现。 list节点的结构&#xff1a; template<class T> struct list_node {list_node<T>* _next;list_node<T>* _pre…

ELK日志(4)

搭建filebeatredislogstasheskibana架构&#xff0c;拓扑图参考ELK&#xff08;3&#xff09;安装redis&#xff0c;并启动&#xff08;1&#xff09;准备安装和数据目录[rootes ~]# mkdir -p /opt/redis_cluster/redis_6379/{conf,logs,pid}&#xff08;2&#xff09;下载redi…

CES 2023:推动低碳化与数字化,英飞凌塑造可持续未来

在参展CES 2023的3200多家企业当中&#xff0c;英飞凌虽然在规模上还比不上某些国际科技巨头&#xff0c;但是其展示的内容却相当引人瞩目。作为一家创立于1999年的高科技企业&#xff0c;英飞凌在全球总计拥有56个研发机构&#xff0c;20个生产工厂&#xff0c;其技术实力之雄…

fiddler 抓手机的包

目录 一、fiddler抓手机包的介绍 二、一个前提&#xff0c;及配置 1.前提 2.前提配置 三、两大步 1.设置fiddler 2.设置手机 一、fiddler抓手机包的介绍 Fiddler是一款非常流行并且实用的http抓包工具&#xff0c;它的原理是在本机开启了一个http的代理服务器&#xff…

分享111个JavaScript源码,总有一款适合您

JavaScript源码 分享111个JavaScript源码&#xff0c;总有一款适合您 源码下载链接&#xff1a;https://pan.baidu.com/s/1aUIpouX5nTwW1FF-8lStnw?pwdjh3v 提取码&#xff1a;jh3v 采集代码下载链接&#xff1a;采集代码.zip - 蓝奏云 ​ 下面是文件的名字&#xff0c;我放…

Golang Web Application

Golang Web Application GoLang Web App基本设置 1.导入库 导入fmt和net/http,http建立一个/和编写一个indexPage的函数,fmt编写一个写Hello world! package mainimport ("fmt""net/http" )func main() {http.HandleFunc("/", indexPage)http.L…

[数据结构复习]自用大纲

内容多基于王道和李春葆《数据结构教程》&#xff0c;做复习提纲之用 基本内容回顾 顺序队 队列是线性表&#xff08;具有逻辑上的前驱后继关系&#xff09;。头插尾删&#xff0c;先进先出。 队列的实现至少需要维护如下内容&#xff08;一数组&#xff0c;二指针&#xff…

电脑开机屏幕闪烁后变成蓝屏无法启动怎么办?

电脑开机屏幕闪烁后变成蓝屏无法启动怎么办&#xff1f;有用户在将电脑开机之后&#xff0c;出现了屏幕会闪动的情况&#xff0c;接着电脑屏幕就变成蓝屏的了。而且再次启动的时候也是这样。这个情况下是我们的系统出现了问题&#xff0c;我们来看看如何去使用U盘进行系统重装的…

python+django大学生体质测试管理系统

系统分为学生和管理员&#xff0c;教师三个角色 学生的主要功能有&#xff1a; 1.学生注册和登陆系统 2.查看系统的公告资讯信息 3.学生查看体质测试的项目&#xff0c;下载测试文件 4.学生留言板在线留言 5.学生个人中心修改个人资料&#xff0c;修改密码 6.学生个人中心查询我…

Java 介绍与环境搭建

文章目录Java 介绍与环境搭建Java 背景介绍Java 背景故事Java 三大平台Java SEJava MEJava EEJava 跨平台工作原理平台与跨平台跨平台工作原理JDK 下载和安装下载 JDK安装 JDK第一个 Java 程序HelloWorld 介绍Java 程序开发的三个步骤HelloWorld 案例的编写和运行HelloWord 案例…

如何通过Terraform Associate考试并获得证书

1 什么是Terraform? Terraform是一个IaC工具&#xff0c;IaC全称为Infrastructure as Code&#xff0c;基础设施即代码。它的理念是通过代码来管理基础设施&#xff0c;如服务器、数据库等&#xff0c;更多请看《Terraform入门教程&#xff0c;示例展示管理Docker和Kubernete…

mysql快速生成100W条测试数据(5)商品销售数据并存入mysql数据库

这是之前的文章里面包含一些以前的一些操作流程可以进行参考学习 更加详细操作步骤在第一篇文章里面 mysql快速生成100W条测试数据&#xff08;1&#xff09;&#xff1a;游戏人物数据 mysql快速生成100W条测试数据&#xff08;2&#xff09;公司员工信息 mysql快速生成100W条测…

Linux USB实现网络共享

usb 网络共享 两个Linux设备之间实现USB网络共享&#xff0c;类似Android手机开启USB网络共享的功能。其中一台设备为USB Host&#xff0c;另外一台为USB Device。Device使用的USB接口必须为USB Slave&#xff0c;否则无法正常工作。使用RNDIS驱动&#xff0c;还能够通过USB与…

【ROS2入门】介绍 eloquent 版本中 turtlesim 和 rqt 使用

大家好&#xff0c;我是虎哥&#xff0c;从今天开始&#xff0c;我将花一段时间&#xff0c;开始将自己从ROS1切换到ROS2&#xff0c;在上一篇中&#xff0c;我们Jeston TX1 核心模块&#xff0c;JetPack_4.6.3刷机后环境中安装了 ROS2 eloquent版本&#xff0c;并完成了初步的…

C语言-动态内存分配(12.1)

目录 思维导图&#xff1a; 1.为什么存在动态内存分配 2.动态内存函数的介绍 2.1 malloc 2.2 free 2.3 calloc 2.4 realloc 3.常见的动态内存错误 写在最后&#xff1a; 思维导图&#xff1a; 1.为什么存在动态内存分配 我们现在学习了一些内存开辟的方式&#xff1a…

IDEA如何把自己改动的代码一次性发给别人

背景介绍&#xff1a; 想把自己改动的代码同步给同事 方式1&#xff1a;通过git&#xff0c;把自己本地代码 push 到代码托管平台&#xff0c;同事从代码托管平台 pull 最新代码&#xff1b; 方式2&#xff1a;通过IDEA的Patch包的方式来快速发送修改的代码&#xff08;步骤如下…