当前位置： 首页 > article >正文

前端基础之《Vue（10）—过滤器》

article 2025/10/24 5:38:40

一、过滤器

1、作用
用于数据处理。

2、全局过滤器
使用Vue.filter('名称', val=>{return newVal})定义。
在任何组件中都可以直接使用。

3、局部过滤器
使用选项，filters: {}定义，只能在当前组件中使用。

4、过滤器在Vue 3.0中已经淘汰了

5、过滤器只能用在{{}}和v-bind中，不支持其他指令

6、过滤器还可以链式调用{{num | f1 | f2}}，过滤器是有顺序的

二、例子代码

<html>
<head><title>过滤器</title><style>[v-cloak] {display: none;}</style>
</head>
<body><div id="app"><h1 v-cloak>{{price | rmb}}</h1><h1 v-cloak>{{num | myfilter}}</h1></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>Vue.filter('rmb', val=>{// 做任何复杂的处理return '¥' + Number(val).toFixed(2)})const app = new Vue({data() {return {price: 99.9,num: 202219}},filters: {myfilter(val) {return '学号' + val}}})app.$mount('#app')</script></body>
</html>

相关文章：

前端基础之《Vue（10）—过滤器》

一、过滤器 1、作用 用于数据处理。 2、全局过滤器 使用Vue.filter(名称, val>{return newVal})定义。 在任何组件中都可以直接使用。 3、局部过滤器 使用选项&#xff0c;filters: {}定义&#xff0c;只能在当前组件中使用。 4、过滤器在Vue 3.0中已经淘汰了 5、过滤器…...

编程日记 2025/9/14 7:47:03

Linux常见指令介绍下（入门级）

1. head head就和他的名字一样&#xff0c;是显示一个文件头部的内容&#xff08;会自动排序&#xff09;&#xff0c;默认是打印前10行。 语法&#xff1a;head [参数] [文件] 选项&#xff1a; -n [x] 显示前x行。 2. tail tail 命令从指定点开始将文件写到标准输出.使用t…...

编程日记 2025/10/19 8:16:13

VIC-3D非接触全场应变测量系统用于小尺寸测量之电子元器件篇—研索仪器DIC数字图像相关技术

在5G通信、新能源汽车电子、高密度集成电路快速迭代的今天&#xff0c;电子元件的尺寸及连接工艺已进入亚毫米级竞争阶段&#xff0c;这种小尺寸下的力学性能评估对测量方式的精度有更高的要求&#xff0c;但传统应变测量手段常因空间尺寸限制及分辨率不足难以捕捉真实形变场。…...

编程日记 2025/10/2 17:23:29

字典与集合——测试界的黑话宝典与BUG追捕术

主题&#xff1a;“字典是测试工程师的暗号手册&#xff0c;集合是BUG的照妖镜” 一、今日目标 ✅ 掌握字典的「键值对暗号体系」与集合的「去重妖法」✅ 开发《测试工程师黑话词典》&#xff0c;让新人秒变老司机✅ 统计自动化测试结果中的高频BUG类型&#xff08;附赠甩锅指…...

编程日记 2025/6/15 18:18:33

下篇：深入剖析 BLE GATT / GAP / SMP 与应用层（约5000字）

引言 在 BLE 协议栈的最上层，GAP 定义设备角色与连接管理，GATT 构建服务与特征，SMP 负责安全保障，应用层则承载具体业务逻辑与 Profile。掌握这一层，可实现安全可靠的设备发现、配对、服务交互和定制化业务。本文将详解 GAP、GATT、SMP 三大模块，并通过示例、PlantUML 时…...

编程日记 2025/10/23 6:25:14

事务详细介绍

一、简介 1、什么是事务 事务是指一组操作&#xff0c;这些操作要么全部成功执行&#xff0c;要么全部不执行&#xff0c;保证数据的完整性和一致性。事务广泛应用于数据库管理系统、分布式系统和企业级应用中&#xff1b; 2、事务的特性 事务具有四个基本特性&#xff0c;…...

编程日记 2025/6/24 22:57:22

PostgreSQL 中的权限视图

PostgreSQL 中的权限视图 PostgreSQL 提供了多个系统视图来查询权限信息&#xff0c;虽然不像 Oracle 的 DBA_SYS_PRIVS 那样集中在一个视图中&#xff0c;但可以通过组合以下视图获取完整的系统权限信息。 一 主要权限相关视图 Oracle 视图PostgreSQL 对应视图描述DBA_SYS_…...

编程日记 2025/7/28 11:05:10

Python-36：饭馆菜品选择问题

问题描述 小C来到了一家饭馆&#xff0c;这里共有 nn 道菜&#xff0c;第 ii 道菜的价格为 a_i。其中一些菜中含有蘑菇&#xff0c;s_i 代表第 ii 道菜是否含有蘑菇。如果 s_i 1&#xff0c;那么第 ii 道菜含有蘑菇&#xff0c;否则没有。 小C希望点 kk 道菜&#xff0c;且希…...

编程日记 2025/10/8 3:30:35

27、Session有什么重⼤BUG？微软提出了什么⽅法加以解决？

Session的重大BUG 1、进程回收导致Session丢失 原理&#xff1a; IIS的进程回收机制会在系统繁忙、达到特定内存阈值等情况下&#xff0c;自动回收工作进程&#xff08;w3wp.exe&#xff09;。由于Session数据默认存储在进程内存中&#xff0c;进程回收时这些数据会被清除。 …...

编程日记 2025/10/14 5:55:39

图论---Bellman-Ford算法

适用场景&#xff1a;有边数限制 ->&#xff08;有负环也就没影响了&#xff09;&#xff0c;存在负权边&#xff0c;O( n * m )&#xff1b; 有负权回路时有的点距离会是负无穷&#xff0c;因此最短路存在的话就说明没有负权回路。 从1号点经过不超过k条边到每个点的距离…...

编程日记 2025/5/26 8:00:25

复杂性决策-思维训练

思维训练 1.模式识别 观察、复杂、不确定、波动、模糊 –找出必要和非必要因素 –识别重大威胁和机遇 2.系统分析 为复杂情景构建系统心智模型 利用模型识别模式做出预测&#xff0c;指定有效策略 3.心智敏锐度 利用不同层次的分析探索挑战的能力&#xff0c;对其他利益相关方在…...

编程日记 2025/7/7 20:02:16

云智融合普惠大模型AI，政务服务重构数智化路径

2025年是“十四五”收官之年&#xff0c;数字政府和政务数智化作为“数字中国”建设的重点&#xff0c;已经取得了显著成效。根据《联合国电子政务调查报告2024》&#xff0c;我国电子政务发展指数全球排名第35位&#xff0c;与2022年相比提升8个名次&#xff1b;其中&#xff…...

编程日记 2025/10/16 8:08:01

反爬系列 IP 限制与频率封禁应对指南

在数据采集领域&#xff0c;IP 限制与频率封禁是反爬机制中最常见的防御手段。随着网站安全策略的升级&#xff0c;单靠传统爬虫技术已难以应对高强度的检测。本文将从反爬机制解析、实战应对策略两个维度&#xff0c;系统讲解如何突破 IP 限制与频率封禁。 一、反爬机制解析 …...

编程日记 2025/6/23 22:11:32

Redis Cluster 使用 CRC16 算法实现 Slot 槽位分片的核心细节

一、CRC16 算法作用原理 哈希计算流程‌ 对键值&#xff08;Key&#xff09;执行 ‌CRC16 算法‌&#xff0c;生成 16 位校验值&#xff08;0~65535&#xff09;。 将校验值 ‌对 16384 取模‌&#xff08;公式&#xff1a;slot CRC16(key) % 16384&#xff09;&#xff0c;…...

编程日记 2025/10/4 4:25:22

Java基础集合 面试经典八股总结 [连载ing]

序言 八股&#xff0c;怎么说呢。我之前系统学习的内容&#xff0c;进行梳理。通过问题的方式&#xff0c;表达出得当的内容&#xff0c;这件事本身就很难。面试时心态、状态、掌握知识的情况等。关于八股文&#xff0c;我不想有太多死记硬背的内容&#xff0c;更多的是希望自我…...

编程日记 2025/10/20 23:01:57

如何将极狐GitLab 议题导出为 CSV？

极狐GitLab 是 GitLab 在中国的发行版&#xff0c;关于中文参考文档和资料有&#xff1a; 极狐GitLab 中文文档极狐GitLab 中文论坛极狐GitLab 官网 导出议题到 CSV (BASIC ALL) 您可以将问题从极狐GitLab 导出为 CSV 文件&#xff0c;这些文件将作为附件发送到您的默认通知…...

编程日记 2025/6/21 21:17:54

UE5 调整字体、界面大小

文章目录 方案一 5.4 版本及以上&#xff08;推荐&#xff09;方案二 5.3 版本及以下&#xff08;推荐&#xff09;方案三 使用插件&#xff08;不推荐&#xff09; 方案一 5.4 版本及以上&#xff08;推荐&#xff09; 进入 编辑 > 编辑器偏好设置&#xff0c;如下图所示&…...

编程日记 2025/10/21 0:47:37

Android Cordova 开发 - Cordova 快速入门（Cordova 环境配置、Cordova 第一个应用程序）

一、Cordova 1、Cordova 概述 Cordova 是使用 HTML&#xff0c;CSS 和 JavaScript 构建混合移动应用程序的平台 2、Cordova 特征 &#xff08;1&#xff09;命令行界面&#xff08;Cordova CLI&#xff09; 这是可用于启动项目&#xff0c;构建不同平台的进程&#xff0c;…...

编程日记 2025/9/29 4:10:37

Docker Compose 和 Kubernetes（k8s）区别

前言&#xff1a;Docker Compose 和 Kubernetes&#xff08;k8s&#xff09;是容器化技术中两个常用的工具&#xff0c;但它们的定位、功能和适用场景有显著区别。以下是两者的核心对比&#xff1a; ​​1. 定位与目标​​ ​​特性​​ ​​Docker Compose​​ ​​Kubernet…...

编程日记 2025/6/15 4:41:00

抽象类相关

抽象类的定义 抽象类 是一种特殊的类&#xff0c;它不能被实例化&#xff0c;只能作为基类来派生出具体类。抽象类至少包含一个纯虚函数 。纯虚函数是在函数原型前加上 0 的虚函数&#xff0c;表示该函数没有具体实现&#xff0c;必须由派生类来实现。 抽象类的作用 提供统…...

编程日记 2025/10/2 8:38:10

十分钟恢复服务器攻击——群联AI云防护系统实战

场景描述 服务器遭遇大规模DDoS攻击&#xff0c;导致服务不可用。通过群联AI云防护系统的分布式节点和智能调度功能&#xff0c;快速切换流量至安全节点&#xff0c;清洗恶意流量&#xff0c;10分钟内恢复业务。 技术实现步骤 1. 启用智能调度API触发节点切换 群联系统提供RE…...

编程日记 2025/6/8 18:54:35

鸿蒙NEXT开发网络相关工具类（ArkTs）

import { connection } from kit.NetworkKit; import { BusinessError, Callback } from kit.BasicServicesKit; import { wifiManager } from kit.ConnectivityKit; import { LogUtil } from ./LogUtil; import { data, radio, sim } from kit.TelephonyKit;// 网络类型枚举 e…...

编程日记 2025/10/4 4:23:35

【上位机——MFC】MFC入门

MFC库中相关类简介 CObject MFC类库中绝大部分类的父类&#xff0c;提供了MFC类库中一些基本的机制。 对运行时类信息的支持。对动态创建的支持。对序列化的支持。 CWinApp 应用程序类&#xff0c;封装了应用程序、线程等信息。 CDocument 文档类&#xff0c;管理数据 F…...

编程日记 2025/8/3 23:12:05

全面介绍AVFilter 的添加和使用

author: hjjdebug date: 2025年 04月 22日 星期二 13:48:19 CST description: 全面介绍AVFilter 的添加和使用 文章目录 1.两个重要的编码思想1. 写代码不再是我们调用别人&#xff0c;而是别人调用我们!2. 面向对象的编程方法. 2. AVFilter 开发流程2.1 编写AVFilter 文件2.1.…...

编程日记 2025/5/15 3:21:45

【UVM项目实战】异步fifo—uvm项目结构以及uvm环境搭建

本文章同步到我的个人博客网站&#xff1a;ElemenX-King&#xff1a;【UVM项目实战】异步fifo—uvm项目结构以及uvm环境搭建 希望大家能使用此网站来进行浏览效果更佳&#xff01;&#xff01;&#xff01; 目录 一、异步FIFO1.1 异步FIFO的定义1.2 亚稳态1.3 异步FIFO关键技术…...

编程日记 2025/10/13 15:08:20

【通关函数的递归】--递归思想的形成与应用

目录 一.递归的概念与思想 1.定义 2.递归的思想 3.递归的限制条件 二.递归举例 1.求n的阶乘 2.顺序打印一个整数的每一位 三.递归与迭代 前言:上篇博文分享了扫雷游戏的实现&#xff0c;这篇文章将会继续分享函数的递归相关知识点&#xff0c;让大家了解并掌握递归的思…...

编程日记 2025/10/17 7:09:32

AI日报 - 2025年04月25日

&#x1f31f; 今日概览(60秒速览) ▎&#x1f916; AGI突破 | OpenAI o3模型展现行动能力&#xff0c;英国发布RepliBench评估AI自主复制风险&#xff0c;DeepMind CEO担忧AGI协调挑战。 模型能力向行动和自主性演进&#xff0c;安全与协调成为焦点。 ▎&#x1f4bc; 商业动向…...

编程日记 2025/6/7 3:06:26

【FAQ】针对于消费级NVIDIA GPU的说明

概述 本文概述 HP Anyware 在配备消费级 NVIDIA GPU 的物理工作站上的关​​键组件、安装说明和重要注意事项。 注意&#xff1a;本文档适用于 NVIDIA 消费级 GPU。NVIDIA Quadro 和 Tesla GPU 也支持 HP Anyware 在公有云、虚拟化或物理工作站环境中运行。请参阅PCoIP Graphi…...

编程日记 2025/10/17 11:25:52

几种查看PyTorch、cuda 和 Python 版本方法

在检查 PyTorch、cuda 和 Python 版本时&#xff0c;除了直接使用 torch.__version__ 和 sys.version&#xff0c;我们还可以通过其他方式实现相同的功能 方法 1&#xff1a;直接访问属性&#xff08;原始代码&#xff09; import torch import sysprint("PyTorch Versi…...

编程日记 2025/7/12 10:08:45

网络安全 | F5 WAF 黑白名单配置实践指南

关注&#xff1a;CodingTechWork 引言 在现代网络安全架构中&#xff0c;F5 Web Application Firewall (WAF) 是保护 Web 应用免受攻击的重要工具。F5 WAF 提供了强大的黑白名单功能&#xff0c;结合 Data Group 和 iRules&#xff0c;可以实现更灵活、更高效的流量控制策略。…...

编程日记 2025/6/21 4:08:27