10.过滤器

2023-05-16

过滤器是做文本格式化的，只能用在插值表达式与 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的替代

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

10.过滤器的相关文章

inceptionv3迁移学习训练+测试

迁移学习在实际应用中的意义非常大 xff0c 它可以将之前已学过的知识 xff08 模型参数 xff09 迁移到一项新的任务上 xff0c 使学习效率大大的提高我们知道 xff0c 要训练一个复杂的深度学习模型 xff0c 成本是十分巨大
60分钟闪击速成PyTorch（Deep Learning with PyTorch: A 60 Minute Blitz）学习笔记

诸神缄默不语个人CSDN博文目录本笔记是我学习 Deep Learning with PyTorch A 60 Minute Blitz 这一PyTorch官方教程后的学习笔记该教程在官网上更新过 xff0c 因此未来还可能继续更新
VSCode上的Git使用手记（持续更新ing...）

诸神缄默不语个人CSDN博文目录本笔记是我想要学习如何将本地文件发布到GitHub上时开始看廖雪峰的Git教程 xff0c 然后打开了VSCode xff0c 发现VSCode上面集成的Git辅助使用功能真的很好用基本上到了不用看教程
诸神缄默不语-个人CSDN博文目录

突然发现我也是一个有好多篇文章的博主了 xff0c 因此设置一个自己的目录 xff0c 方便查找感觉列在一篇文章里然后直接用Ctrl 43 F都比CSDN内置的目录和分类方便优先按学科进行分类 xff0c 此外列出面经和其他两个分类文
spring 拦截器的实现

spring 拦截器是spring AOP体系下的一个重要的子功能它类似于web中的filter xff0c 但又比filter灵活 xff0c 强大得多许多AOP框架 xff0c 包括Spring xff0c 都是以拦截器做通知模型
解决 :dpkg: 处理软件包 linux-image-4.15.0-33-generic (--configure)时出错的问题

报错内容正在读取软件包列表完成正在分析软件包的依赖关系树正在读取状态信息完成 nodejs legacy 已经是最新版 4 2 6 dfsg 1ubuntu4 2 下列软件包是自动安装的并且现在不需要了 xff1a gimp da
cs224w（图机器学习）2021冬季课程学习笔记集合

诸神缄默不语个人CSDN博文目录 1 课程信息课程主页 xff1a https web stanford edu class cs224w index html xff08 已经转为新一季课程了 xff0c 其提供的PPT和colab内
cs224w（图机器学习）2021冬季课程学习笔记2: Traditional Methods for ML on Graphs

诸神缄默不语个人CSDN博文目录 cs224w xff08 图机器学习 xff09 2021冬季课程学习笔记集合文章目录 1 章节前言2 Traditional Feature based Methods Node3 Tradition
Re1：读论文 C&S (Correct and Smooth) Combining Label Propagation and Simple Models Out-performs Graph Ne

诸神缄默不语个人CSDN博文目录 Combining Label Propagation and Simple Models Out performs Graph Neural Networks 文章目录 1 模型构造思路2 Notati
huggingface.transformers安装教程

诸神缄默不语个人CSDN博文目录本文属于huggingface transformers全部文档学习笔记博文的一部分全文链接 xff1a huggingface transformers包文档学习笔记 xff08 持续更新ing x
什么是ablation study（消融实验）？

诸神缄默不语个人CSDN博文目录本文是对学术概念 ablation study xff08 消融实验 xff09 一词的介绍在深度学习论文中 xff0c ablation study往往是在论文最终提出的模型上 xff0c 减少一些改
TensorFlow安装教程

诸神缄默不语个人CSDN博文目录 TensorFlow是学习深度学习时常用的Python神经网络框架 xff0c 本文将介绍其部分版本在Linux系统使用pip进行安装的方法 xff08 注 xff1a TensorFlow官方推荐使用p
各种同质图神经网络模型的理论和节点表征学习任务的集合包rgb_experiment

诸神缄默不语个人CSDN博文目录最近更新时间 xff1a 2023 5 10 最早更新时间 xff1a 2023 5 10 本文仅考虑同质图setting下的模型对于异质图场景 xff0c 可以参考我写的另一篇博文 xff1a 异质图
Re 40：读论文 GL-GIN: Fast and Accurate Non-Autoregressive Model for Joint Multiple Intent Detection and

诸神缄默不语个人CSDN博文目录论文名称 xff1a GL GIN Fast and Accurate Non Autoregressive Model for Joint Multiple Intent Detection and S
用huggingface.transformers.AutoModelForTokenClassification实现命名实体识别任务

诸神缄默不语个人CSDN博文目录 huggingface transformers包文档学习笔记 xff08 持续更新ing xff09 本文主要介绍使用AutoModelForTokenClassification在典型序列识别任务
各种预训练模型的理论和调用方式大全

诸神缄默不语个人CSDN博文目录本文主要以模型被提出的时间为顺序 xff0c 系统性介绍各种预训练模型的理论 xff08 尤其是相比之前工作的创新点 xff09 调用方法和表现效果最近更新时间 xff1a 2023 5 10 最早更新
对天乙社区bbscs8实现的详细分析三

经过前面的分析我们已经理清楚了业务层接下来的部分将是web层部分首先我们从web xml开始我们知道任何一个java web应用系统都是从WEB INF web xml启动的根据servlet2 4规范filter执行是按照 w
linux下安装node和npm

linux下安装node和npm 1 打开linux的命令窗口 xff0c 进入根目录 cd 2 使用wget命令下载node包注 xff1a 这里作者下载的是16 14版本的node xff0c 如果有需要可以直接更换制定版本的node
FreeRTOS小知识点

61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 FreeRTOS 中实现临界区的两种途径 61 61 61 61 61 61 61 61 61 61 61 61 61 61
51单片机连接ESP8266串口WiFi模块

烧录固件引脚连接 WiFi51单片机VCC3 3V xff08 5V连接时间过长可能会烧坏WiFi模块 xff09 GNDGNDCH PD3 3VGPIO0GNDUTXDTXDURXDRXD 烧录固件打开烧录软件 xff0c 选择配置选

随机推荐

linux 远程可视化

实验linux是vmware上的rhel6 0 xff0c 安装的是centos社区桌面 xff0c ip 192 168 31 223 xff0c win设置的固定ip 192 168 31 166 xff0c 且远程ssh软件用的是Se
【七夕节】浪漫七夕，代码传情。将爱意变成绚烂的立体场景，给她（他）一个惊喜！（送代码）

浪漫七夕 xff0c 代码传情将爱意变成绚烂的立体场景 xff0c 给她 xff08 他 xff09 一个惊喜 xff01 一 python代码 xff08 情话转二进制编码 xff09 二 js代码部分 xff08 二进制编码生成立体场
【可信执行环境】Keystone 简介

当下 xff0c 安全挑战是一个非常突出的问题可行执行环境TEE Trusted Execution Environment 成为必须满足的特性 1 安全挑战与TEE 1 1 安全挑战的来源 xff1a 1 1 1 被抄板导致研发投入的
超长docker笔记

docker ce 和docker ee docker操作容器只需要id前4位就可以 docker编译安装 https blog csdn net lwyeluo article details 51765309 删除命令 docker r
第1课【寄存器开发到库开发】寄存器库位操作封装分层 GPIO

目录基本知识框架课堂笔记什么是寄存器开发什么是库开发寄存器开发和库开发的关联寄存器开发的基本流程寄存器开发的优缺点库开发的基本流程库开发的优缺点结论如何从寄存器开发实现库开发 xff08 GPIO口为例 xff0c 通过操作其寄存器
python str基本用法

目录 1 没什么用的 1 1 调用实例属性后自动执行 getattribute 1 2 实例化后自动调用 new 1 3 将其他变量转变为字符串 repr 1 4 反向替代占位符格式化 rmod 1 5 字符串反向做乘法 rmul 1 6
32.QButtonGroup

目录 1 创建和添加按钮 1 1 创建按钮组 1 2 添加按钮 addButton 2 查看按钮 2 3 获取当前选中的按钮 CheckedButton 3 从按钮组中移除按钮 removeButton 4 ID操作 4 1 设置 setI
Windows下的Win32串口编程

在工业控制中 xff0c 工控机 xff08 一般都基于Windows平台 xff09 经常需要与智能仪表通过串口进行通信串口通信方便易行 xff0c 应用广泛一般情况下 xff0c 工控机和各智能仪表通过RS485总线进行通信 RS4
Ubuntu内网穿透

本文借鉴使用frp进行内网穿透少数派目录 1 准备材料 2 服务端部署 3 服务端后台运行 4 客户端部署 1 准备材料 1 一台具有公网IP的实体机 xff08 服务端 xff0c 也可以是vps 2 一台网页部署内网的实体机客户
Ubuntu系统基本操作

文章中所需要的文件可以在这里下载链接 xff1a https pan baidu com s 1NYXxHD0jebngmCTEwgjGbQ 提取码 xff1a 2jyo 目录 1 安装谷歌浏览器 2 修改开机启动项 3 快捷键查找与设置
Ubuntu向日葵锁定之后忘记密码后解除锁定状态

此操作会重置本机识别码与本机验证码我们在使用向日葵的时候会使用锁定按钮设置完密码之后 xff0c 我们忘了 xff0c 就会导致无法使用向日葵重新安装也不能解决问题 xff0c 这个时候我们找到etc orayconfig conf
26.疲劳检测

目录 1 项目介绍 2 代码实现 2 1 导入库 2 2 定义68个关键点 2 3 定义eye aspect ratio 2 4 定义参数 2 5 定义阈值 2 6 定义次数 2 7 创建检测器 2 8 获取左眼与右眼的起始点与终止点 2
NX点亮oled

效果是这样的目录 1 接线 2 配置环境 3 运行代码 4 显示开发板信息 1 接线小屏幕的名称叫oled xff0c 使用芯片SSD1306驱动上面有四个引脚 xff0c 与NX接线如下 VCC 5V GND GND SDA 3 S
43.一维卷积-航空公司评论情感预测

之前我们使用的都是二维卷积 xff0c 二维卷积处理图像问题 xff0c 这次我们使用一维卷积 xff0c 一维卷积处理序列问题一维卷积就是在一个序列上进行滑动 xff0c 从而得出一维卷积的结果 xff0c 详细一维卷积的介绍可以看一下
serial库常见用法

安装的时候要输入 pip install pyserial 进行安装 serial是python做串口通讯的库 xff0c 在这里介绍了NX与Windows串口通讯 NX串口通讯windows Suyuoa的博客 CSDN博客目录 1 使
Ubuntu开机自启动一些东西

有三种方式做开机自启动目录 1 免除sudo密码 2 Startup 2 desktop 3 service 1 免除sudo密码做完这一步你的所有sudo命令都不会再让你输密码了如果你的开机自启动的东西需要sudo xff0c 那么
附录3-动态组件 component与keep-alive setup()写法

目录 1 基本使用 2 按钮切换组件 3 keep alive 3 1 在切换组件的时候 xff0c 默认情况下被切换的组件就会被销毁 3 1 1 数据情况 3 1 2 生命周期函数情况 3 2 使用 keep alive 3 3 keep
附录11-插件ESLint与prettier

ESLint是提示错误的 xff0c prettier是帮你解决错误的目录 1 ESLint 1 1 安装 1 2 配置 1 3 效果 2 prettier 1 ESLint 1 1 安装 1 2 配置在插件介绍中 xff0c 搜索 e
用 C 语言编写 Windows 服务程序

NTService cpp Defines the entry point for the console application include lt windows h gt include lt stdio h gt define S
10.过滤器

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

10.过滤器

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的替代

10.过滤器 的相关文章

随机推荐

热门标签

10.过滤器的相关文章