10.过滤器

news2024/11/17 15:41:32

过滤器是做文本格式化的,只能用在 插值表达式 与 v-bind 上,在vue3中已经被弃用了,这里我简单记录一下并写一下在vue3的替代方法

目录

1  基本使用

1.1  vue2中的写法

1.2  vue3的替代

2  私有过滤器与全局过滤器

2.1  vue2的写法

2.2  vue3的替代

3  连续使用多个过滤器

3.1  vue2的写法

3.2  vue3的替代

4  过滤器传参

4.1  vue2的写法

4.2  vue3的替代


1  基本使用

我们做一个首字母大写的例子

1.1  vue2中的写法

需要在filters中定义capi这个过滤器,过滤器默认情况下的第一个参数就是 | 前面的值

过滤器的返回值会覆盖掉之前的原值

  • charAt()是获取指定索引的内容,这里的val.chartAt(0)获得的就是h这个字符
  • toUpperCase()是将字符串变为大写
  • slice()是从索引为1的地方截取到最后
  • 上面三个都是原生JS的方法

1.2  vue3的替代

在vue3中可以把格式化的方法放在methods中

改动值后同样生效

只有需要多次复用的时候,我们才会考虑在method中定义一个函数,如果复用情况不多,可以把处理的方式直接放在插值表达式中

2  私有过滤器与全局过滤器

上面我们写的就是私有过滤器,私有过滤器只能在当前的app中使用

2.1  vue2的写法

私有过滤器在app1中是无法使用的

可以定义一个全局过滤器,让所有的app都可以使用

如果私有过滤器与全局过滤器同时存在,且叫相同的名字,优先使用私有过滤器

2.2  vue3的替代

在vue3中我们需要换个视角,我们不在html中看全局过滤器这个事情,我们在脚手架中看,全局过滤器实则就是全局方法

在app.vue中我们没有定义方法,所以用的就是全局的方法,发现可以正常显示,且没有warning

3  连续使用多个过滤器

3.1  vue2的写法

下面就是先使用过滤器capi,再使用过滤器capi1,可以加无数个过滤器

上面的结果会返回 Hello vue.js somthing

3.2  vue3的替代

使用多个函数进行嵌套

4  过滤器传参

4.1  vue2的写法

第一个参数永远是需要过滤的内容

4.2  vue3的替代

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

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

相关文章

shell脚本----数组

文章目录 一、数组定义的方法二、数组的操作2.1 数组的输出2.2 删除数组2.3 数组切片2.4 数组的替换2.5 判断数组中是否有空值2.6 追加函数2.7 向函数传入参数 一、数组定义的方法 数组定义的规则 数组中的每个元素分分隔符一定为空格隔开每个元素都拥有与其对应的下标&#…

Kubesphere流水线实现蓝绿发布

Kubesphere流水线实现蓝绿发布 1. Gitlab仓库准备 1.1 创建仓库 新建空白项目,名字随便取 greenweb复制克隆地址 http://192.168.31.199/deploy/greenweb.git1.2 初始化并上传代码 克隆并初始化代码仓库 mkdir git cd git git clone http://192.168.31.199/deploy/green…

AIMD 为什么收敛(tcp reno/cubic 为什么好)

TCP 拥塞控制目标是缓解并解除网络拥塞,让所有流量公平共享带宽,合在一起就是公平收敛。 AIMD(几乎所有与拥塞控制相关的协议或算法都有 AIMD 的影子,包括 RoCE,BBRv2) 为什么收敛?我一般会给出下面的老图:…

1区(TOP)极速送审,5月SCI/SSCI/EI刊源表已更新,

2023年5月SCI/SSCI/EI期刊目录更新 5月我处新增多本1-2区高分区新刊,包括计算机、医学、环境、化学、材料、生物、工程、社科领域,新刊版面极速送审~ 以下是本月重点期刊推荐,可作参考: 计算机类新刊: 1区计算机科…

钓鱼邮件演练项目实战

1、 使用 setoolkit 克隆站点 Setoolkit 是一个万能的社工工具(社会工程学工具集合) ┌──(root Cwillchris)-[~] └─# setoolkit 翻译成中文: 从菜单中选择: 1)社会工程攻击 2)渗透测试(快速通道) 3)第三方模块 4)更新社会工程师工具包 5)更新 SET 配置…

使用 spring 的 IoC 的实现账户的CRUD(2)双层实现+注解开发

在http://t.csdn.cn/yucl4的基础上进行注解开发 【分析】 xml文件其中spring容器中的bean,因此通过注解把这些放到容器中即可 component:相当xml中的bean的id: 如果不指定 value 属性,默认 bean 的 id 是当前类的类名, 首字母小写。 Controller Service Reposito…

计算机毕业论文选题推荐|软件工程|系列二

文章目录 导文题目导文 计算机毕业论文选题推荐|软件工程 (***语言)==使用其他任何编程语言 例如:基于(***语言)门窗账务管理系统的设计与实现 得到:基于JAVA门窗账务管理系统的设计与实现 基于vue门窗账务管理系统的设计与实现 等等 题目 基于(***语言)门窗账务管理系…

C++——类和对象(6)

作者:几冬雪来 时间:2023年5月10日 内容:C类和对象内容讲解 目录 前言: 1.取地址操作符重载: 2.构造函数(进阶): 1.初始化列表: 2.static成员: 结尾…

数据可视化工具 - ECharts饼形图的编写

1 饼形图 1年龄分布模块制作 1.1 官网找到类似实例&#xff0c; 适当分析&#xff0c;并且引入到HTML页面中 <!DOCTYPE html> <html> <head><meta charset"utf-8"/><title>ECharts</title><!-- 引入刚刚下载的 ECharts 文件…

Android WebRTC+SRS/ZLM视频通话(4):Android使用WebRTC推流SRS/ZLMediaKit

Android WebRTCSRS/ZLM视频通话&#xff08;4&#xff09;&#xff1a;Android使用WebRTC推流SRS/ZLMediaKit 来自奔三人员的焦虑日志 接着上一章内容&#xff0c;继续来记录Android是如何使用WebRTC往SRS或ZLMediaKit进行推流。想要在Android设备上实现高质量的实时流媒体推送…

VirtualBox+Vagrant

1.下载VirtualBox 1.下载 VirtualBox官网下载 下载过程无特别注意事项&#xff0c;注意调整到非 C 盘位置即可&#xff0c;其他部分皆为默认设置 2.修改虚拟电脑存储位置 1.将C:\Users\用户名下的VirtualBox VMs文件夹复制到自定义目标文件夹中 2.打开VirtualBox,在全局设置…

嵌入式TCP/IP协议栈-LwIP

文章目录 LWIP是什么基础知识OSI七层模型TCP/IP五层模型LwIP的模型常见协议ARP协议ICMP协议DHCP协议DNS协议 LwIP APISocket大端模式与小端模式地址字节序IP地址转换 网络并发 LWIP是什么 LWIP是一个轻量级的TCP/IP协议栈&#xff0c;其全称为Lightweight IP&#xff0c;它专门…

UNIX网络编程卷一 学习笔记 第十二章 IPv4与IPv6的互操作性

未来数年内&#xff0c;因特网也许会逐渐从IPv4过渡到IPv6&#xff0c;在过渡阶段&#xff0c;基于IPv4的现有应用能与基于IPv6的全新应用协同工作非常重要。例如&#xff0c;厂商不应只提供仅能与IPv6 telnet服务器程序协同工作的telnet客户程序&#xff0c;而应该提供既能与I…

环境搭建:Visual Studio的安装和创建C++项目

Visual Studio的安装和创建C项目 引言前言下载Visual Studio安装包安装Visual Studio创建项目小结 引言 &#x1f4a1; 作者简介&#xff1a;专注于C/C高性能程序设计和开发&#xff0c;理论与代码实践结合&#xff0c;让世界没有难学的技术。 &#x1f449; &#x1f396;️ C…

第五十章 Unity Input Manager 输入系统(上)

Unity的输入系统支持多种输入设备&#xff0c;比如键盘和鼠标&#xff0c;游戏手柄&#xff0c;触摸屏&#xff0c;VR和AR控制器等等。Unity 通过两个独立的系统提供输入支持&#xff1a;第一&#xff0c;输入管理器 (Input Manager) 是 Unity 核心平台的一部分&#xff0c;默认…

数据可视化一、ECharts

零、文章目录 数据可视化一、ECharts 1、数据可视化 &#xff08;1&#xff09;数据可视化 数据可视化主要目的&#xff1a;借助于图形化手段&#xff0c;清晰有效地传达与沟通信息。数据可视化可以把数据从冰冷的数字转换成图形&#xff0c;揭示蕴含在数据中的规律和道理。…

TGANet:用于改进息肉分割的文本引导注意力

文章目录 TGANet: Text-Guided Attention for Improved Polyp Segmentation摘要本文方法编码器模块Feature Enhancement ModuleLabel AttentiondecoderMulti-scale Feature Aggregation损失函数 实验结果 TGANet: Text-Guided Attention for Improved Polyp Segmentation 摘要…

2023年湖北建设厅特种工报名需要什么条件?报名流程是什么?

2023年湖北建设厅特种工报名需要什么条件&#xff1f;报名流程是什么&#xff1f; 建设厅特种工现在已经开始报名考试安排计划了&#xff0c;想要报考建设厅特种工的现在可以了解一下具体的流程以及相关信息哟。为自己报名考试做准备&#xff0c;下面启程别就来给您介绍一下建设…

从入门到精通:接口自动化测试中加密、解密和Sign签名的完整指南

【专业解读】接口自动化测试安全机制剖析&#xff1a;加密、解密和sign签名技术原理与应用&#xff01; 目录 摘要&#xff1a; 1. 加密 2. 解密 3. Sign签名 4. 示例 摘要&#xff1a; 在进行接口自动化测试时&#xff0c;加密、解密和sign签名是非常重要的步骤。这些过…

基于单片机的数字频率计设计

数字频率计概述 数字频率计是计算机、通讯设备、音频视频等科研生产领域不可缺少的测量仪器。它是一种用十进制数字显示被测信号频率的数字测量仪器。它的基本功能是测量正弦信号&#xff0c;方波信号及其他各种单位时间内变化的物理量。在进行模拟、数字电路的设计、安装、调试…