当前位置: 首页 > news >正文

Vue中过滤器如何使用?

过滤器是对即将显示的数据做进⼀步的筛选处理,然后进⾏显示,值得注意的是过滤器并没有改变原来 的数据,只是在原数据的基础上产⽣新的数据。过滤器分全局过滤器和本地过滤器(局部过滤器)。

目录

全局过滤器

本地过滤器

过滤器传参

串联过滤器


全局过滤器

下⾯定义⼀个全局过滤器,⽤于在数据前加上⼤写的VUE。需要注意的是,全局过滤器定义必须始终位于Vue实例之上,否则会报错。
<div id="app">{{message | toAdd}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>Vue.filter("toAdd", function(value) {return 'VUE' + value})var demo = new Vue({el: '#app',data: {message: '过滤器',}})
</script>
对应的运行结果如下:
注意: 1. Vue.filter() 后有两个参数:过滤器名,过滤器处理函数。 2. 过滤器处理函数也有⼀个参数:要过滤的数据。

本地过滤器

本地过滤器存储在vue组件中,作为filters属性中的函数,我们可以注册多个过滤器存储在其中。
<div id="app"><p>{{message | Reverse}}</p><p>{{message | Length}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>var demo = new Vue({el: '#app',data: {message: '过滤器',},filters: {Reverse: function(value) {if (!value){return '';}return value.toString().split('').reverse().join('');},Length: function(value) {return value.length;},},})
</script>

第一个p标签通过对得到的msg数据进行拆分,并将拆分之后的字符进行翻转,最后输出。第二个p标签通过获取得到的数据长度并显示出来。运行结果如下:

过滤器传参

除此之外,过滤器也是可以传递参数的。

<div id="app">{{msg1 | toDou(1,2)}}{{msg2 | toDou(10,20)}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>Vue.filter('toDou', function(value, param1, param2) {if (param2 < 10) {return value + param1;} else {return value + param2;}});new Vue({el: '#app',data: {msg1: 9,msg2: 12,}});
</script>
以上的代码第一条插值表达式对得到的msg1进行过滤,该toDou过滤器传入两个参数,在过滤器中对传入的参数进行判断,若传入的第二个参数小于10,则会返回对应的msg1值加上第一个参数的值。第二条插值表达式同上。最后运行结果如下:
注意:过滤器处理函数的第⼀个参数,仍然是要过滤的数据。从第⼆个参数开始,才是过滤器本身要传递的参数。

串联过滤器

多个过滤器可以串联使⽤。
<div id="app">{{money | prefix | suffix}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>Vue.filter("prefix", function(value) {return '¥' + value})Vue.filter("suffix", function(value) {return  value + '元'})var demo = new Vue({el: '#app',data: {money:10}})
</script>

以上的代码主要是对插值表达式中的值同时添加了两个过滤器,money会先得到prefix过滤器的处理,并将处理之后的值再给suffix过滤器进行处理。对应的代码运行效果如下:

相关文章:

Vue中过滤器如何使用?

过滤器是对即将显示的数据做进⼀步的筛选处理&#xff0c;然后进⾏显示&#xff0c;值得注意的是过滤器并没有改变原来 的数据&#xff0c;只是在原数据的基础上产⽣新的数据。过滤器分全局过滤器和本地过滤器&#xff08;局部过滤器&#xff09;。 目录 全局过滤器 本地过滤器…...

【爬虫】7.4. 字体反爬案例分析与爬取实战

字体反爬案例分析与爬取实战 文章目录 字体反爬案例分析与爬取实战1. 案例介绍2. 案例分析3. 爬取 本节来分析一个反爬案例&#xff0c;该案例将真实的数据隐藏到字体文件里&#xff0c;即使我们获取了页面源代码&#xff0c;也无法直接提取数据的真实值。 1. 案例介绍 案例网…...

Linux cat 的作用

Linux中的cat命令用于连接文件并打印到标准输出设备&#xff08;通常是终端&#xff09;。 它的主要作用有以下几点&#xff1a; 查看文件内容&#xff1a;cat命令可用于查看文本文件的内容&#xff0c;将文件的内容从第一行到最后一行打印到终端。 合并文件&#xff1a;cat命…...

Windows中的命令行提示符里的Start命令执行路径包含空格时的问题

转载&#xff1a;电脑知识收藏夹 Blog Archive Windows中的命令行提示符里的Start命令执行路径包含空格时的问题 当使用Windows 中的命令行提示符执行这段指令时(测试Start命令执行带空格的路径的程序或文件问题)&#xff0c;第一行Start会成功执行&#xff0c;跳出记事本程…...

【基础计算机网络1】认识计算机网络体系结构,了解计算机网络的大致模型(上)

前言 今天&#xff0c;小编我也要进入计算机网络的整个内容&#xff0c;虽然这个计算机网络的内容在考研部分中占比比较小&#xff0c;有些人不把这一部分当成重点&#xff0c;这种想法是错误的。我觉得考研的这四个内容都是非常重要的&#xff0c;我们需要进行全力以赴的对待每…...

学校宿舍智能水电表管理系统:为节约资源保驾护航

随着科技的不断发展&#xff0c;越来越多的学校开始重视宿舍管理的智能化。其中&#xff0c;智能水电表管理系统作为一项重要的基础设施&#xff0c;已经逐渐被各大高校引入。本文将围绕学校宿舍智能水电表管理系统展开详细介绍&#xff0c;让我们一起来了解一下这个节约资源、…...

EasyFalsh移植使用方法

参考&#xff1a;https://blog.csdn.net/Mculover666/article/details/105510837 注意&#xff1a; 这里说的修改默认环境变量后修改环境变量版本号就自动重新写入到flash这句话是有问题的&#xff0c;要开启上面【#define EF_ENV_AUTO_UODATE】宏定义后才会实现该功能&#…...

函数栈帧(详解)

一、前言&#xff1a; 环境&#xff1a;X86Vs2013 我们C语言学习过程中是否遇到过如下问题或者疑惑&#xff1a; 1、局部变量是如何创建的&#xff1f; 2、为什么局部变量的值是随机值&#xff1f; 3、函数是怎么传参的&#xff1f;传参的顺序是怎样的&#xff1f; 4、形…...

【面试题总结1】-Static、Const、QT中基于TCP的通信服务器/客户端端操作

1、在C和C中static关键字的用法 在C语言和C中&#xff0c; ① static修饰未初始化的全局变量&#xff0c;结果默认为0 &#xff1b; ② 当static修饰局部变量时&#xff0c;只是延长了这个变量的生命周期&#xff0c;并没有改变其作用域。 比如说&#xff0c;这个变量是在哪个函…...

镜像的基本命令(docker)

文章目录 前言一、docker命令介绍1、帮助命令2、显示镜像3、搜索镜像4、下载镜像5、删除镜像 总结 前言 本文主要介绍docker中与镜像相关的一些命令&#xff0c;是对狂神课程的一些总结&#xff0c;作为一个手册帮助博主和使用docker的同学们来查找和回忆。 实验环境&#xf…...

Liunx远程调试

1、Vscode中使用xdebug调试php 2、工具的下载 3、debug的配置 1、Vscode中使用xdebug调试php 1&#xff0c;在phpstudy中启用xdebug扩展 2&#xff0c;打开php.ini&#xff0c;修改配置 [Xdebug] zend_extensionD:/PHP/Extensions/php/php5.6.9nts/ext/php_xdebug.dll xdebug…...

Mac m1 安装rabbitmq+php-amqplib

rabbitmq 官方地址 https://www.rabbitmq.com mac 软件包 Downloading and Installing RabbitMQ — RabbitMQ 一.这里我选择 homebrew brew updatebrew install rabbitmq二.php代码 用composer 安装 10年软件开发经验,结交朋友! 分销商城系统开发,App商城开发 商务合作 s…...

如何实现软件的快速交付与部署?

一、低代码开发 微服务、平台化、云计算作为当前的IT技术热点&#xff0c;主要强调共享重用&#xff0c;它们促进了软件快速交付和部署。 但现实的痛点却是&#xff0c;大多数软件即使采用了微服务技术或者平台化思路&#xff0c;也难以做到通过软件共享重用来快速满足业务需求…...

c语言每日一练(14)【加强版】

前言&#xff1a;每日一练系列&#xff0c;每一期都包含5道选择题&#xff0c;2道编程题&#xff0c;博主会尽可能详细地进行讲解&#xff0c;令初学者也能听的清晰。博主有时会将一些难题综合成每日一练加强版&#xff0c;加强版是特殊的&#xff0c;它仅包含5道选择题&#x…...

操作系统的知识点总结

(一)操作系统的发展过程 一.前言 在 20 世纪 50 年代中期&#xff0c;出现了第一个简单的批处理 OS;60 年代中期开发出多道程序批处理系统:;不久又推出分时系统&#xff0c;与此同时&#xff0c;用于工业和武器控制的实时 OS 也相继问世。20 世纪 70 到 90 年代&#xff0c;是…...

浏览器安全-同源策略和CORS

同源策略 同源策略是浏览器的一个安全功能&#xff0c;浏览器禁止在当前域读写其他域的资源&#xff0c;如限制跨域发送ajax请求 不受同源策略限制的 1&#xff09;页面中的链接&#xff0c;重定向表单以及表单提交 2&#xff09;跨域资源引入 如script不受跨域限制&#xff0…...

MySQL——条件查询

2023.9.2 今天学习了尚硅谷MySQL基础DQL语言中的条件查询语言。相关SQL语句笔记如下&#xff1a; #条件查询 SELECT * FROM employees ; SELECT last_name,salary,commission_pct FROM employees WHERE salary>10000 AND salary<15000; SELECT last_name,salary FROM em…...

转载: 又拍云【PrismCDN 】低延时的P2P HLS直播技术实践

低延时的P2P HLS直播技术实践本文是第二部分《PrismCDN 网络的架构解析,以及低延迟、低成本的奥秘》低延时的P2P HLS直播技术实践 [首页 > Open Talk NO.41 | 2018 音视频技术沙龙深圳站 > 低延时 WebP2P 直播技术实践https://opentalk-blog.b0.upaiyun.com/prod/2018-0…...

PHP常用六大设计模式

PHP常用六大设计模式 单例模式 特点 三私一公 &#xff1a;私有的静态变量&#xff08;存放实例&#xff09;&#xff0c;私有的构造方法&#xff08;防止创建实例&#xff09;&#xff0c;私有的克隆方法(防止克隆对象)&#xff0c;公有的静态方法&#xff08;对外界提供实…...

Rust入门(1)

Rust的入门 1.配置Rust环境&#xff08;Windows环境&#xff09;1.下载Rust安装包2.配置path环境3.验证Rust4.Linux or MacOS系统(补充)1.Rust包依赖于C & 需要C编译器 5.卸载Rust6.Rust的构建工具和包管理器1.构建项目2.运行项目3.测试项目4.为项目构建文档5.将库发布到cr…...

谷歌浏览器插件

项目中有时候会用到插件 sync-cookie-extension1.0.0&#xff1a;开发环境同步测试 cookie 至 localhost&#xff0c;便于本地请求服务携带 cookie 参考地址&#xff1a;https://juejin.cn/post/7139354571712757767 里面有源码下载下来&#xff0c;加在到扩展即可使用FeHelp…...

Android Wi-Fi 连接失败日志分析

1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分&#xff1a; 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析&#xff1a; CTR…...

CVPR 2025 MIMO: 支持视觉指代和像素grounding 的医学视觉语言模型

CVPR 2025 | MIMO&#xff1a;支持视觉指代和像素对齐的医学视觉语言模型 论文信息 标题&#xff1a;MIMO: A medical vision language model with visual referring multimodal input and pixel grounding multimodal output作者&#xff1a;Yanyuan Chen, Dexuan Xu, Yu Hu…...

QMC5883L的驱动

简介 本篇文章的代码已经上传到了github上面&#xff0c;开源代码 作为一个电子罗盘模块&#xff0c;我们可以通过I2C从中获取偏航角yaw&#xff0c;相对于六轴陀螺仪的yaw&#xff0c;qmc5883l几乎不会零飘并且成本较低。 参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...

屋顶变身“发电站” ,中天合创屋面分布式光伏发电项目顺利并网!

5月28日&#xff0c;中天合创屋面分布式光伏发电项目顺利并网发电&#xff0c;该项目位于内蒙古自治区鄂尔多斯市乌审旗&#xff0c;项目利用中天合创聚乙烯、聚丙烯仓库屋面作为场地建设光伏电站&#xff0c;总装机容量为9.96MWp。 项目投运后&#xff0c;每年可节约标煤3670…...

跨链模式:多链互操作架构与性能扩展方案

跨链模式&#xff1a;多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈&#xff1a;模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展&#xff08;H2Cross架构&#xff09;&#xff1a; 适配层&#xf…...

HTML前端开发:JavaScript 常用事件详解

作为前端开发的核心&#xff0c;JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例&#xff1a; 1. onclick - 点击事件 当元素被单击时触发&#xff08;左键点击&#xff09; button.onclick function() {alert("按钮被点击了&#xff01;&…...

Java + Spring Boot + Mybatis 实现批量插入

在 Java 中使用 Spring Boot 和 MyBatis 实现批量插入可以通过以下步骤完成。这里提供两种常用方法&#xff1a;使用 MyBatis 的 <foreach> 标签和批处理模式&#xff08;ExecutorType.BATCH&#xff09;。 方法一&#xff1a;使用 XML 的 <foreach> 标签&#xff…...

MySQL 知识小结(一)

一、my.cnf配置详解 我们知道安装MySQL有两种方式来安装咱们的MySQL数据库&#xff0c;分别是二进制安装编译数据库或者使用三方yum来进行安装,第三方yum的安装相对于二进制压缩包的安装更快捷&#xff0c;但是文件存放起来数据比较冗余&#xff0c;用二进制能够更好管理咱们M…...

MFC 抛体运动模拟:常见问题解决与界面美化

在 MFC 中开发抛体运动模拟程序时,我们常遇到 轨迹残留、无效刷新、视觉单调、物理逻辑瑕疵 等问题。本文将针对这些痛点,详细解析原因并提供解决方案,同时兼顾界面美化,让模拟效果更专业、更高效。 问题一:历史轨迹与小球残影残留 现象 小球运动后,历史位置的 “残影”…...