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

vue -- 自定义指令钩子函数补充 自定义过滤器filter参数

news 2026/2/9 11:54:11

自定义指令补充

  • 自定义指令通过钩子函数的形式来实现自定义的功能

这里是几个常用的钩子函数以及它的方法：
bind：只调用一次，指令第一次绑定到元素时调用，在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用
update：所在的组件的VNode更新时调用，指令的值可能发生了改变，也可能没有。
componentUpated：指令所在组件的VNode及其子VNode 全部更新后调用
unbind：只调用一次，指令与元素解绑时调用。

自定义过滤器

过滤器用来对Vue中的属性或者数据进行过滤，即在显示之前进行数据处理或筛选。
过滤器可以用在两个地方：双花括号差值和v-bind表达式

过滤器的语法如下：

{{data|filter(参数)}}

data时filter的第一个参数（隐性参数），而括号中的参数是指第二个以后的参数。

过滤器的用法如下：

//双花括号形式
{{message|capitalize}}
//v-bind形式<div v-bind:id="rawId|formatId"></div>
  • 为什么叫自定义过滤器？

因为Vue2.0以后删除了所有内置过滤器

自定义全局过滤器

使用全局方法Vue.filter可自定义全局过滤器。所谓全局方法就是在多个实例中都可以使用。比如，再定义一个vue实例，在这个示例挂载的元素中也可以使用。

对于过滤器执行的函数，一般建议用箭头函数来表示。


<body><div id="app"><h3>{{8|addZero}}</h3><h3 v-bind:id="3|addZero">1</h3></div><script>//自定义过滤器，当数字为1位数字时，在前面加个0//过滤器执行的函数的第一个参数data就表示要过滤处理的数据，过滤器的名称Vue.filter('addZero', (data) => {//data参数是 | 前面的数据return data < 10 ? "0" + data : data;})const vm = new Vue({el: '#app',data: {}})</script>
</body>

注意：过滤器要先定义，然后再new Vue（）实例，否则会失效且报错（也就是过滤器要写在new Vue（）前面）

自定义局部过滤器

局部过滤器就是写在实例内部，通过filter选项设置，只能应用在对应的Vue实例挂载的DOM上。


<body><div id="app"><h3>{{currentDate|filterNum(3)}}</h3><h3 v-bind:id="3|addZero">1</h3></div><script>const vm = new Vue({el: '#app',data: {currentDate: Date.now(),},filters: {//局部过滤器filterNum: (data, n) => {return data.toFixed(n)},addZero: function (data) {return data < 10 ? "0" + data : "data"}}})</script>
</body>

在这里插入图片描述

相关文章：

vue -- 自定义指令钩子函数补充 自定义过滤器filter参数

自定义指令补充 自定义指令通过钩子函数的形式来实现自定义的功能 这里是几个常用的钩子函数以及它的方法&#xff1a; bind&#xff1a;只调用一次&#xff0c;指令第一次绑定到元素时调用&#xff0c;在这里可以进行一次性的初始化设置。 inserted&#xff1a;被绑定元素插…...

编程日记 2023/3/11 13:11:22

Qt不会操作？Qt原理不知道？ | Qt详细讲解

文章目录Qt界面开发必备知识UI界面与控件类型介绍Qt设计器原理控件类型的介绍信号与槽机制处理常用控件创建与设置常见展示型控件创建与设置常见动作型控件创建与设置常见输入型控件创建与设置常见列表控件创建于设置Qt中对象树的介绍项目源码结构刨析.pro.hmain.cpp.cppQt界面…...

编程日记 2023/3/11 13:10:18

LeetCode-面试题 17.05. 字母与数字【前缀和，哈希表】

LeetCode-面试题 17.05. 字母与数字【前缀和&#xff0c;哈希表】题目描述&#xff1a;解题思路一&#xff1a;前缀和。数字为-1&#xff0c;字母为1。我们需要找到的子数组是前缀和之差为0的&#xff0c;例如s[right]-s[left]0&#xff0c;那么s[right]s[left]&#xff0c;变为…...

编程日记 2023/3/11 13:09:17

华为OD机试题 - 叠放书籍（JavaScript）| 机考必刷

更多题库，搜索引擎搜 梦想橡皮擦华为OD 👑👑👑 更多华为OD题库，搜 梦想橡皮擦 华为OD 👑👑👑 更多华为机考题库，搜 梦想橡皮擦华为OD 👑👑👑 华为OD机试题 最近更新的博客使用说明本篇题解：叠放书籍题目输入输出示例一输入输出Code解题思路版权说明华为O…...

编程日记 2023/3/11 13:08:14

【数据库概论】第十一章 数据库并发控制

第十一章 并发控制 在多处理机系统中&#xff0c;每个处理机可以运行一个事务&#xff0c;多个处理机可以同时运行多个事务&#xff0c;实现多个事务并行运行&#xff0c;这就是同时并发方式。当多个用户并发存取数据库时会产生多个事务同时存取同一事务的情况&#xff0c;如果…...

编程日记 2023/3/11 13:07:12

Nginx配置实例-反向代理案例二

实现效果&#xff1a;使用nginx反向代理&#xff0c;根据访问的路径跳转到不同端口服务 nginx监听端口为9000&#xff0c; 访问 http://127.0.0.1:9000/edu/ 直接跳转到127.0.0.1:8080 访问 http://127.0.0.1:9000/vod/ 直接跳转到127.0.0.1:8081 一、准备工作 1. 准备两个tom…...

编程日记 2023/3/11 13:06:10

HTML 字符集

为了正确显示 HTML 页面&#xff0c;Web 浏览器必须知道要使用哪个字符集。 从 ASCII 到 UTF-8 ASCII 是第一个字符编码标准。ASCII 定义了 128 种可以在互联网上使用的字符&#xff1a;数字&#xff08;0-9&#xff09;、英文字母&#xff08;A-Z&#xff09;和一些特殊字符…...

编程日记 2023/3/11 13:05:03

【C语言】每日刷题 —— 牛客语法篇（3）

前言 大家好&#xff0c;继续更新专栏c_牛客&#xff0c;不出意外的话每天更新十道题&#xff0c;难度也是从易到难&#xff0c;自己复习的同时也希望能帮助到大家&#xff0c;题目答案会根据我所学到的知识提供最优解。 &#x1f3e1;个人主页&#xff1a;悲伤的猪大肠9的博客…...

编程日记 2023/3/11 13:04:01

基于Vue3和element-plus实现一个完整的登录功能

先看一下最终要实现的效果:登录页面:注册页面:(1)引入element-plus组件库引入组件库的方式有好多种,在这里我就在main.js全局引入了.npm i element-plus -Smain.js中代码:import { createApp } from "vue"; //element-plus import ElementPlus from "element-pl…...

编程日记 2023/3/11 13:01:53

【java】Java 中泛型的实现原理

文章目录前序1. 泛型1.1 泛型方法1.2 泛型类1.3 泛型接口2. 泛型的基本原理3. 小结前序 泛型是 Java 开发中常用的技术&#xff0c;了解泛型的几种形式和实现泛型的基本原理&#xff0c;有助于写出更优质的代码。本文总结了 Java 泛型的三种形式以及泛型实现原理。 1. 泛型 …...

编程日记 2023/3/11 13:00:50

【C++提高编程】C++全栈体系（二十七）

C提高编程 第五章 STL- 常用算法 三、常用排序算法 算法简介&#xff1a; sort //对容器内元素进行排序random_shuffle //洗牌 指定范围内的元素随机调整次序merge // 容器元素合并&#xff0c;并存储到另一容器中reverse // 反转指定范围的元素 1. sort 功能描述&#…...

编程日记 2023/3/11 12:59:49

软考高级信息系统项目管理师系列之三十九：项目集管理

软考高级信息系统项目管理师系列之三十九：项目集管理 一、项目集管理内容二、项目集管理基础概述1.项目集定义2.项目集活动3.项目集管理三、项目集的管理过程四、项目集治理1.项目集治理概述2.项目集指导委员会的职责3.项目集治理功能五、项目集生命周期1.项目集生命周期三个阶…...

编程日记 2023/3/11 12:58:46

44-Golang中的channel

Golang中的channel为什么要使用channelchannel的介绍channel的基本使用定义/声明channel管道的遍历和关闭channel的关闭channel的遍历goroutine和channel结合应用实例1应用实例2案例注意事项为什么要使用channel 前面使用全局变量加锁同步来解决goroutine的通讯&#xff0c;但…...

编程日记 2023/3/11 12:57:43

80/20法则

80/20法则&#xff08;The 80/20 Rule&#xff09;又称为帕累托法则(Pareto Principle&#xff09;、二八定律、帕累托定律、最省力法则、不平衡原则、犹太法则、马特莱法则等一、什么是80/20法则80/20法则&#xff08;The 80/20 Rule&#xff09;&#xff0c;又称为帕累托法则…...

编程日记 2023/3/11 12:56:41

计算机网络高频面试题（四）

一、什么是计算机网络 是一个将分散的、具有独立功能的计算机系统&#xff0c;通过通信设备与线路连接起来&#xff0c;由功能完善的软件实现资源共享和信息传递的系统 按分布范围&#xff0c;计算机网络里有局域网LAN和广域网WAN, 其中局域网的代表以太网&#xff0c;以及这…...

编程日记 2023/3/11 12:55:38

[计算机组成原理(唐朔飞 第2版)]第三章 系统总线（学习复习笔记）

3.1 总线的基本概念 计算机系统的五大部件之间的互连方式有两种 各部件之间使用单独的连线&#xff0c;称为分散连接将各部件连到一组公共信息传输线上&#xff0c;称为总线连接 总线是连接多个部件的信息传输线&#xff0c;是各部件共享的传输介质。 当多个部件与总线相连时&…...

编程日记 2023/3/11 12:54:34

华为OD机试题 - 计算堆栈中的剩余数字（JavaScript）| 机考必刷

更多题库，搜索引擎搜 梦想橡皮擦华为OD 👑👑👑 更多华为OD题库，搜 梦想橡皮擦 华为OD 👑👑👑 更多华为机考题库，搜 梦想橡皮擦华为OD 👑👑👑 华为OD机试题 最近更新的博客使用说明本篇题解：计算堆栈中的剩余数字题目输入输出描述示例一输入输出说明示例二…...

编程日记 2023/3/11 12:53:29

VB实现点爆炸效果

需在窗体放置以下 4 个控件&#xff0c;所有控件不用设置任何属性&#xff0c;均采用默认设置&#xff1a; ’ Picture1&#xff0c;Command1&#xff0c;Check1&#xff0c;Timer1 Option Explicit Dim I Dim ctD() As tyD, ctDs As Long, ctR As Single Private Type tyD x…...

编程日记 2023/3/11 12:52:25

ICG-alkyne,吲哚菁绿-炔基结构式,实验室科研试剂，CAS号：1622335-41-4

ICG-alkyne,吲哚菁绿-炔基 中文名称&#xff1a;吲哚菁绿-炔基 CAS号&#xff1a;1622335-41-4 英文名称&#xff1a;ICG-alkyne 英文别名&#xff1a;ICG-alk 性状&#xff1a;绿色粉末 化学式&#xff1a;C48H53N3O4S 分子量&#xff1a;768.03 溶剂&#xff1a;溶于…...

编程日记 2023/3/11 12:51:22

【并发编程】volatile的原理我好像又懂了

文章目录优秀引用1、概述2、可见性保证2.1、什么是可见性2.2、例子举证2.3、结果解析3、有序性保证3.1、什么是有序性3.2、什么是重排序3.3、例子举证4、无法保证原子性4.1、什么是原子性4.2、例子举证5、内存屏障5.1、什么是内存屏障5.2、不同内存屏障的作用6、volatile和sync…...

编程日记 2023/3/11 12:50:18

K8S认证|CKS题库+答案| 11. AppArmor

目录 11. AppArmor 免费获取并激活 CKA_v1.31_模拟系统 题目 开始操作&#xff1a; 1&#xff09;、切换集群 2&#xff09;、切换节点 3&#xff09;、切换到 apparmor 的目录 4&#xff09;、执行 apparmor 策略模块 5&#xff09;、修改 pod 文件 6&#xff09;、…...

编程新知 2026/1/29 2:11:35

解锁数据库简洁之道：FastAPI与SQLModel实战指南

在构建现代Web应用程序时&#xff0c;与数据库的交互无疑是核心环节。虽然传统的数据库操作方式&#xff08;如直接编写SQL语句与psycopg2交互&#xff09;赋予了我们精细的控制权&#xff0c;但在面对日益复杂的业务逻辑和快速迭代的需求时&#xff0c;这种方式的开发效率和可…...

编程新知 2025/8/13 16:42:24

工程地质软件市场：发展现状、趋势与策略建议

一、引言 在工程建设领域&#xff0c;准确把握地质条件是确保项目顺利推进和安全运营的关键。工程地质软件作为处理、分析、模拟和展示工程地质数据的重要工具&#xff0c;正发挥着日益重要的作用。它凭借强大的数据处理能力、三维建模功能、空间分析工具和可视化展示手段&…...

编程新知 2025/10/6 6:10:29

数据链路层的主要功能是什么

数据链路层&#xff08;OSI模型第2层&#xff09;的核心功能是在相邻网络节点&#xff08;如交换机、主机&#xff09;间提供可靠的数据帧传输服务&#xff0c;主要职责包括&#xff1a; &#x1f511; 核心功能详解&#xff1a; 帧封装与解封装 封装&#xff1a; 将网络层下发…...

编程新知 2026/2/1 7:31:51

解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错

出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上&#xff0c;所以报错&#xff0c;到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本&#xff0c;cu、torch、cp 的版本一定要对…...

编程新知 2025/11/3 2:11:24

Java入门学习详细版（一）

大家好&#xff0c;Java 学习是一个系统学习的过程&#xff0c;核心原则就是“理论 实践 坚持”&#xff0c;并且需循序渐进&#xff0c;不可过于着急&#xff0c;本篇文章推出的这份详细入门学习资料将带大家从零基础开始&#xff0c;逐步掌握 Java 的核心概念和编程技能。 …...

编程新知 2025/12/14 14:47:02

多模态大语言模型arxiv论文略读（108）

CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题&#xff1a;CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者&#xff1a;Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...

编程新知 2026/2/1 6:11:51

使用Matplotlib创建炫酷的3D散点图：数据可视化的新维度

文章目录 基础实现代码代码解析进阶技巧1. 自定义点的大小和颜色2. 添加图例和样式美化3. 真实数据应用示例实用技巧与注意事项完整示例（带样式）应用场景在数据科学和可视化领域，三维图形能为我们提供更丰富的数据洞察。本文将手把手教你如何使用Python的Matplotlib库创建引…...

编程新知 2026/1/28 8:25:28

Netty从入门到进阶（二）

二、Netty入门 1. 概述 1.1 Netty是什么 Netty is an asynchronous event-driven network application framework for rapid development of maintainable high performance protocol servers & clients. Netty是一个异步的、基于事件驱动的网络应用框架&#xff0c;用于…...

编程新知 2026/1/26 5:44:16

STM32HAL库USART源代码解析及应用

STM32HAL库USART源代码解析 前言STM32CubeIDE配置串口USART和UART的选择使用模式参数设置GPIO配置DMA配置中断配置硬件流控制使能生成代码解析和使用方法串口初始化__UART_HandleTypeDef结构体浅析HAL库代码实际使用方法使用轮询方式发送使用轮询方式接收使用中断方式发送使用中…...

编程新知 2026/1/31 13:18:46