第十四节:带你梳理Vue2:filters过滤器

news/2024/7/22 12:40:05/文章来源:https://blog.csdn.net/fjiex/article/details/139126215

过滤器是什么?

过滤器是一种在模板中处理数据的便捷方式, 会经常在其他模板语言中见到, 他们特别适合对字符串和数字进行简单的显示变化.


1. 通过案例理解过滤器

示例: 对于数字价格处理

1.1 Mastache语法中处理价格数字

<div id="app"><!-- 正常处理 --><p>苹果价格:{{ (priceOne/100).toFixed(2) }} 元/斤</p><p>梨子价格:{{ (priceTwo/100).toFixed(2) }} 元/斤</p><p>香蕉价格:{{ (priceThree/100).toFixed(2) }} 元/斤</p></div><script>   const vm = new Vue({el: "#app",data: {priceOne: 2312,priceTwo: 1825,priceThree: 1634,}})
</script>

我们就会发现一件事情, 同样的逻辑我们要处理三次,这种处理方案,页面需要使用到多少次价格,我们就需要处理多少次相同的逻辑


我们在回顾到目前为止我们所学的知识, 有什么方方案可以很好的将逻辑抽离出来吗, 计算属性和侦听器显然不合适,因为都需要检测依赖数据的变化, 有多少数据就需要多少的计算属性,和多少的侦听器, 反而不美

想来想去,定义一个方法通过接受不同的参数来处理我们的相同的逻辑,每次只要调用这个方法就可以了,挺不错的, 尝试一下


1.2 方法处理相同逻辑

<div id="app"><!--  使用方法处理价格 --><p>苹果价格:{{ priceHandle(priceOne)}} 元/斤</p><p>梨子价格:{{ priceHandle(priceTwo)}} 元/斤</p><p>香蕉价格:{{ priceHandle(priceThree)}} 元/斤</p></div><script>   const vm = new Vue({el: "#app",data: {priceOne: 2312,priceTwo: 1825,priceThree: 1634,},methods:{priceHandle(price){return (price/100).toFixed(2)}}})
</script>

方法也有不美之处,就是寓意化不够明确,所有的事情都需要定义方法来处理, 那么方法的耦合性就会很高

所以对于数据的先期处理, vue给我们提供了过滤器 filters


1.3 使用filters 过滤器处理数据

注意过滤器的方法定义在filters属性中

<div id="app"><!-- 过滤器 filter --><p>苹果价格:{{ priceOne | formatPrice}} 元/斤</p><p>梨子价格:{{ priceTwo | formatPrice }} 元/斤</p><p>香蕉价格:{{ priceThree | formatPrice }} 元/斤</p></div><script>   const vm = new Vue({el: "#app",data: {priceOne: 2312,priceTwo: 1825,priceThree: 1634,},filters:{formatPrice(price){return (price/100).toFixed(2)}}})
</script>

其实这个时候,我们甚至连后面的`元/斤` 都可以处理到过滤器中
<div id="app"><!-- 过滤器 filter --><p>苹果价格:{{ priceOne | formatPrice}} </p><p>梨子价格:{{ priceTwo | formatPrice }} </p><p>香蕉价格:{{ priceThree | formatPrice }} </p></div><script>   const vm = new Vue({el: "#app",data: {priceOne: 2312,priceTwo: 1825,priceThree: 1634,},filters:{formatPrice(price){return "¥"+(price/100).toFixed(2) +'元/斤'}}})</script>

这样的好处很多, 代码重复更少, 可读性更强, 同时呢,维护性也更好, 如果要更改逻辑,只需要修改一次,而不是每个使用的地方都修改


2. 过滤器传参

通过案例,我们也了解了, 过滤器在使用时会将|前面的内容作为过滤器函数的第一个参数,如果过滤器只需要这一个参数时, 过滤器本身不需要加括号

如果过滤器需要其他参数来动态改变逻辑怎么办,

这个时候过滤器在使用的时候就可以加括号执行,并传入相应的参数,输入的参数会作为第二个参数传递给过滤器

例如:

<div id="app"><!-- 过滤器传参 --><p>苹果价格:{{ priceOne | formatPrice("¥")}} </p><p>梨子价格:{{ priceTwo | formatPrice("$") }} </p><p>香蕉价格:{{ priceThree | formatPrice("$") }} </p></div><script>   const vm = new Vue({el: "#app",data: {priceOne: 2312,priceTwo: 1825,priceThree: 1634,},filters:{formatPrice(price,symbol){return symbol+(price/100).toFixed(2) +'元/斤'}}})</script>

这样我们就可以通过传参的方式来动态的改变过滤逻辑


3. 链式调用过滤器

过滤器还可以通过链式调用的方式在一个表达式中使用多个过滤器.

比如我们给刚才的案例添加一个四舍五入到整数的过滤器

<div id="app"><!-- 链式调用过滤器 --><p>苹果价格:{{ priceOne | roundPrice | formatPrice("¥")}} </p><p>梨子价格:{{ priceTwo | roundPrice | formatPrice("$") }} </p><p>香蕉价格:{{ priceThree | roundPrice  | formatPrice("$") }} </p></div><script>   const vm = new Vue({el: "#app",data: {priceOne: 2312,priceTwo: 1825,priceThree: 1634,},filters:{roundPrice(price){return Math.round(price/100);},formatPrice(price,symbol){return symbol+price.toFixed(2) +'元/斤'}}})</script>

这里首先会调用roundPrice 过滤器, 会将价格传入到这个过滤器中处理, 然后在将处理后的结果传给第二个过滤器处理,最后输出到页面上


4. 属性使用过滤器

除了在插值,还可以在v-bind中使用过滤器,因为使用了v-bind动态绑定的属性,属性值已经不再是一个字符串,而是一个表达式了

<div id="app"><!-- 动态绑定的属性使用过滤器 --><input type="text" :value="priceOne | roundPrice | formatPrice('¥')">
</div><script>   const vm = new Vue({el: "#app",data: {priceOne: 2312,priceTwo: 1825,priceThree: 1634,},filters:{roundPrice(price){return Math.round(price/100);},formatPrice(price,symbol){return symbol+price.toFixed(2) +'元/斤'}}})</script>

5. 还可以通过Vue构造函数注册全局过滤器

也就是说现在的过滤器是一个组件级的过滤器

如果我重新new 一个Vue实例, 这个过滤器将不能在另一个实例上使用

示例

<div id="app"><p>苹果价格:{{ priceOne | roundPrice | formatPrice("¥")}} </p><p>梨子价格:{{ priceTwo | roundPrice | formatPrice("$") }} </p><p>香蕉价格:{{ priceThree | roundPrice  | formatPrice("$") }} </p>
</div><div id="example"><!-- 在第二个vue实例上不能使用第一个实例的过滤器, -->{{ price | roundPrice }}
</div><script>   const vm = new Vue({el: "#app",data: {priceOne: 2312,priceTwo: 1825,priceThree: 1634,},filters:{roundPrice(price){return Math.round(price/100);},formatPrice(price,symbol){return symbol+price.toFixed(2) +'元/斤'}}})const vm2 = new Vue({el:"#example",data:{price:6123}})
</script>

如果我们在第二个vue实例上使用过滤器就会报错,


所以我们可以注册全局过滤器,所有的组件都能使用

<div id="app"><p>苹果价格:{{ priceOne | roundPrice | formatPrice("¥")}} </p><p>梨子价格:{{ priceTwo | roundPrice | formatPrice("$") }} </p><p>香蕉价格:{{ priceThree | roundPrice  | formatPrice("$") }} </p>
</div><div id="example">{{ price | formatPrice("$") }}
</div><script>   // 注册全局过滤器Vue.filter("formatPrice",function(price,symbol){return symbol+price.toFixed(2) +'元/斤'})const vm = new Vue({el: "#app",data: {priceOne: 2312,priceTwo: 1825,priceThree: 1634,},filters:{roundPrice(price){return Math.round(price/100);}}})const vm2 = new Vue({el:"#example",data:{price:6123}})
</script>

注册的全局过滤器,就可以在vue任何地方使用

这种方式适合整个应用都会用到的过滤器,


6. 过滤器注意事项

6.1 过滤器中的this

过滤器是唯一不能使用this来访问数据或者其他方法的地方,这一点是故意设计成这样的, 因为过滤器应该是一个纯函数, 也就是对于同样的输入每次都返回同样的输出,而不涉及任何外部数据, 如果想访问外部数据可以通过参数传递.


6.2 过滤器使用的地方

另一件注意事项就是过滤器只能在插值和v-bind指令中使用过滤器,但是在Vue1 中,可以在任何可以使用表达式的地方使用过滤器

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

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

深入了解Nginx(一):Nginx核心原理

一、Nginx核心原理 本节为大家介绍Nginx的核心原理,包含Reactor模型、Nginx的模块化设计、Nginx的请求处理阶段. &#xff08;本文源自微博客,且已获得授权&#xff09; 1.1、Reactor模型 Nginx对高并发IO的处理使用了Reactor事件驱动模型。Reactor模型的基本组件包含时间收集…

Python爬虫实战(实战篇)—17获取【CSDN某一专栏】数据转为Markdown列表放入文章中

文章目录 专栏导读背景结果预览1、页面分析2、通过返回数据发现适合利用lxmlxpath3、进行Markdown语言拼接总结 专栏导读 在这里插入图片描述 &#x1f525;&#x1f525;本文已收录于《Python基础篇爬虫》 &#x1f251;&#x1f251;本专栏专门针对于有爬虫基础准备的一套基…

gitlab将本地文件项目上传至gitlab服务

打开gitlab网页界面&#xff0c;登陆管理员账号 &#xff08;测试服务器安装的gitlab&#xff0c;浏览器输入ip或配置的gitlab地址&#xff09; 创建新项目 使用gitlab创建项目 创建一个新项目&#xff08;忽略分组&#xff09; &#xff08;忽略分组&#xff09; 在创建工…

【CTF Web】CTFShow web5 Writeup(SQL注入+PHP+位运算)

web5 1 阿呆被老板狂骂一通&#xff0c;决定改掉自己大意的毛病&#xff0c;痛下杀手&#xff0c;修补漏洞。 解法 注意到&#xff1a; <!-- flag in id 1000 -->拦截很多种字符&#xff0c;连 select 也不给用了。 if(preg_match("/\|\"|or|\||\-|\\\|\/|\…

深入分析 Android Activity (一)

文章目录 深入分析 Android Activity (一)1. Activity 的窗口管理2. Activity 的生命周期管理onCreateonStartonResumeonPauseonStoponDestroyonRestart 3. Activity 与 Fragment 的交互添加 FragmentFragment 的生命周期 4. Activity 的任务和返回栈5. 配置变化处理 总结 深入…

【实用的 IDEA 配置和操作技巧总结】

前置知识 IDEA的设置快捷键为ctrlalts键&#xff0c;后文介绍IDEA常见的配置就不再赘述这一点了。 基础配置 取消默认打开上次项目 日常开发都会打开不同的项目&#xff0c;初次安装IDEA之后&#xff0c;每次打开IDEA都会开启上一次启动的项目&#xff0c;所以我们需要进入设…

微软MSBuild大会发布Copilot+PC:技术革新还是隐私噩梦?

微软在最近的MSBuild 2024大会上发布了全新的CopilotPC概念&#xff0c;这一技术结合了高通骁龙X Elite芯片&#xff0c;将人工智能与PC紧密结合。此次发布引起了广泛关注&#xff0c;不仅是因为其技术创新&#xff0c;还因为潜在的隐私问题。甚至连Elon Musk也对此表示担忧&am…

Springboot项目——网页版本五子棋

网页五子棋&#xff1a;本项目简单实现了网页版本的五子棋对战功能&#xff0c;同时会根据用户的天梯分数来匹配&#xff0c;可供多位用户同时提供对战功能。大致可分为三个模块&#xff0c;用户模块&#xff0c;匹配模块&#xff0c;对战模块&#xff0c;下面重点介绍以下三个…

一款220V降12V恒压芯片电路原理图WT5114

一款220V降12V恒压芯片电路原理图WT5114&#xff0c;电路图简示如下&#xff1a; 一款220V降12V恒压芯片线路图WT5114 WT5114是一款高性能、高精度、低成本的PWM电源开关&#xff0c;适用于非隔离降压和反激式应用。它集成了专用电流模式PWM控制器&#xff08;采用SOP8封装的高…

【机器学习300问】102、什么是混淆矩阵?

一、混淆矩阵的定义 混淆矩阵是一种用于评估分类模型性能的评估指标。当模型对数据进行预测并将数据分配到预定义的类别时&#xff0c;混淆矩阵提供了一种直观的方式来总结这些预测与数据实际类别之间的对应关系。具体来说&#xff0c;它是一个表格。 二、分类模型性能评估一级…

SWM181系列应用

一、SWM181系列 ISP功能 1.1、注意&#xff1a;ISP引脚为B0&#xff0c;VCC&#xff0c;GND是UART-RX、UART-TX 下载引脚。所有型号的UART-RX - - > A0&#xff0c;UART-TX - - > A1。 1.2、注意&#xff1a;板级设计必须留出ISP引脚&#xff0c;防止调试过程中芯片锁死后…

【赠书第25期】C#项目开发实战(微视频版)

文章目录 前言 1 项目构思与需求分析 1.1 项目构思 1.2 需求分析 2 系统设计 2.1 系统架构设计 2.2 数据库设计 2.3 接口设计 3 编码实现 3.1 环境搭建 3.2 编码规范 3.3 编码实现 4 测试与部署 4.1 单元测试 4.2 系统测试 4.3 部署与上线 5 总结与展望 6 推…

LeetCode刷题之HOT100之三数之和

2024/5/29 天气真他妈好呀&#xff01;好天气让我舒畅&#xff0c;可惜俺今天把我养护了两三个月的栀子花花苞又整掉了一朵&#xff0c;呜呜呜&#xff01;看着它们一天天长大&#xff0c;花苞边由嫩绿泛白&#xff0c;结果被我不小心弄掉了&#xff0c;我是罪人。它们还想&…

K8s service 进阶

文章目录 K8s service 进阶Service 工作逻辑Service 具体实现Service 资源类型ClusterIPNodePortLoadBalancerExternalName Service 与 EndpointEndpoint 与 容器探针自定义Endpoint Service 相关字段sessionAffinityexternalTrafficPolicyinternalTrafficPolicypublishNotRead…

学习笔记——动态路由协议——OSPF(OSPF区域)

四、OSPF区域 OSPF路由器在同一个区域(Area)内网络中泛红LSA(链路状态通告)。为了确保每台路由器都拥有对网络拓扑的一致认知&#xff0c;LSDB需要在区域内进行同步。如果OSPF域仅有一个区域&#xff0c;随着网络规模越来越大&#xff0c;LSDB越来越庞大&#xff0c;OSPF路由器…

【MySQL数据库】 MySQL主从复制

MySQL主从复制 MySQL主从复制主从复制与读写分离的意义主从数据库实现同步&#xff08;主从复制&#xff09;三台mysql服务器搭建主从复制&#xff0c;要求不可以用root帐号同步&#xff0c;要求第三台服务器在测试过1、2的主从复制之后进行主从复制配置 MySQL主从复制 主从复…

SQL学习小记(三)

SQL学习小记&#xff08;三&#xff09; 功能实现思路代码部分名词解释 代码打包为可执行文件 功能说明&#xff1a;使用python代码&#xff0c;将数据库database1中的表格table1同步到数据库database2中 功能实现 思路 #mermaid-svg-R1pWrEWA799M299a {font-family:"tre…

计算机组成原理----原码,反码与补码

1.原码的出现 我们通常使用"","-"判断数字的正负,而在计算机中,则将二进制的首位当作标记符号,"0"表示正数,"1"表示负数,这样就解决了在计算机中表示数值正负的问题,唯一的缺点就是第1位被占作符号位。 0 0000001 原 0 0000010 原 …

密码学基础概念

加密性 什么是加密&#xff1f; 1.对原有的明文数据&#xff0c;执行某种运算&#xff0c;得到密文数据。 2.密文数据对于未授权人员而言&#xff0c;在一定上程度上加大了解读的难度 3.加密功能用于实现机密性 什么是密钥&#xff1f; 1.如同持有保险柜钥匙才能打开保险柜…

如何在Spring Boot中整合PageHelper实现分页功能

1.前言 在开发web应用程序时&#xff0c;经常会遇到需要对数据库中的数据进行分页查询的情况。为了简化分页查询的实现过程&#xff0c;我们可以利用PageHelper这个优秀的分页插件来实现分页功能。本文将介绍如何在Spring Boot项目中整合PageHelper&#xff0c;并演示如何使用它…