10.过滤器

news/2024/10/23 7:17:52/

过滤器是做文本格式化的,只能用在 插值表达式 与 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.ppmy.cn/news/371783.html

相关文章

过滤器介绍

1、什么是过滤器? 过滤器,顾名思义就是起到过滤筛选作用的一种事物,只不过相较于现实生活中的过滤器(课上邓老师所列举的例子:滤水器、空气净化器等等),这里的过滤器过滤的对象是客户端访问的w…

实验7-3-6 字符串转换成十进制整数

实验7-3-6 字符串转换成十进制整数 题目描述 输入一个以#结束的字符串,本题要求滤去所有的非十六进制字符(不分大小写),组成一个新的表示十六进制数字的字符串,然后将其转换为十进制数后输出。如果在第一个十六进制字…

醒醒吧,连新来的实习生都在进阶自动化,你还在点点点吗,聪明人都在提升自己!

5年测试老兵了,真的很迷茫,觉得自己不再提升自己,真的会被实习生替代。 很多朋友跟我吐槽,说自己虽然已经工作3-4年,可工作依旧是点点点,新来的实习生用一周的时间就把工作内容学会了,他的压力…

用Arduino打造智能苹果手表,可同步提示苹果手机的消息

我想要一款智能手表,它向我展示了来自iPhone的通知,尺寸足够小,并且有可充电电池持续至少一天。我基于Arduino创建了自己的Apple手表。它是基于Arduino mini pro的智能手表,通过蓝牙连接到iPhone。USB微型端口连接到电池&#xff…

制作一款可以【记录运动历史数据】的智能呼啦圈——硬件改造篇

简介:本文将从硬件选型,原理图解析以及3D建模来完成普通呼啦圈到智能呼啦圈硬件改造。 一、概述 又是在电脑前连坐几小时的一天,和大部分上班族一样,由于工作原因没空去健身房,也抽不出多少时间进行户外锻炼&#xf…

把电梯当跑步机

逸彩城中间有个大厅,大厅的两边有上下的滚梯,早上9点多,人不是很多。 我看到一个人站在电梯上,不上也不下,我还以为电梯没有开呢。 过去一看,把我乐的,他把电梯当跑步机了。 这小伙是边上理发…

更好玩的跑步机,还有丰富课程资源,赤兔Air跑步机体验

上个月开始天气就慢慢变冷了,尤其是早晚的时候,户外的天气格外阴冷,这也成了很多朋友不去锻炼的好借口。当然了,室内也有很多健身方式可以选择,否则一冬天不健身的话,不仅会长肉,对心肺健康也不好。 要想获得更好的健身效果,专业的设备少不了,这两年室内健身的器械选择…

苹果公布穿戴设备进行跌倒检测专利,Find My技术堪称王炸

苹果公司“使用移动设备进行情境感知的跌倒检测”专利公布。该项专利的申请日期为2022年09月09日。申请公布日为2023年03月14日。发明人为S文卡泰斯瓦兰,PDH扎德,VR马伊吉,YJJ雷纳德。 根据该项专利的摘要显示,本公开涉及使用移…