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

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

news 2025/10/26 8:04:16

自定义指令补充

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

这里是几个常用的钩子函数以及它的方法：
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

Prompt Tuning、P-Tuning、Prefix Tuning的区别

一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning（提示调优） 核心思想：固定预训练模型参数，仅学习额外的连续提示向量（通常是嵌入层的一部分）。实现方式：在输入文本前添加可训练的连续向量（软提示），模型只更新这些提示参数。优势：参数量少（仅提…...

编程新知 2025/10/25 16:16:12

SciencePlots——绘制论文中的图片

文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了&#xff1a;一行…...

编程新知 2025/9/8 13:50:07

解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八

现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet&#xff0c;点击确认后如下提示 最终上报fail 解决方法 内核升级导致&#xff0c;需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...

编程新知 2025/10/23 16:31:23

Springcloud：Eureka 高可用集群搭建实战（服务注册与发现的底层原理与避坑指南）

引言&#xff1a;为什么 Eureka 依然是存量系统的核心&#xff1f; 尽管 Nacos 等新注册中心崛起&#xff0c;但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制&#xff0c;是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...

编程新知 2025/10/26 7:40:30

NFT模式：数字资产确权与链游经济系统构建

NFT模式&#xff1a;数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新&#xff1a;构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议&#xff1a;基于LayerZero协议实现以太坊、Solana等公链资产互通&#xff0c;通过零知…...

编程新知 2025/10/24 9:31:39

06 Deep learning神经网络编程基础 激活函数 --吴恩达

深度学习激活函数详解 一、核心作用 引入非线性：使神经网络可学习复杂模式控制输出范围：如Sigmoid将输出限制在(0,1)梯度传递：影响反向传播的稳定性二、常见类型及数学表达 Sigmoid σ ( x ) = 1 1 +...

编程新知 2025/10/2 18:05:53

select、poll、epoll 与 Reactor 模式

在高并发网络编程领域&#xff0c;高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表&#xff0c;以及基于它们实现的 Reactor 模式&#xff0c;为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。​ 一、I…...

编程新知 2025/10/23 7:27:15

今日学习：Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存

文章目录 优雅版线程池ThreadPoolTaskExecutor和ThreadPoolTaskExecutor的装饰器并发修改异常并发修改异常简介实现机制设计原因及意义 使用线程池造成的链路丢失问题线程池导致的链路丢失问题发生原因 常见解决方法更好的解决方法设计精妙之处 登录续期登录续期常见实现方式特…...

编程新知 2025/9/17 22:26:02

docker 部署发现spring.profiles.active 问题

报错&#xff1a; org.springframework.boot.context.config.InvalidConfigDataPropertyException: Property spring.profiles.active imported from location class path resource [application-test.yml] is invalid in a profile specific resource [origin: class path re…...

编程新知 2025/9/20 12:14:18

使用LangGraph和LangSmith构建多智能体人工智能系统

现在&#xff0c;通过组合几个较小的子智能体来创建一个强大的人工智能智能体正成为一种趋势。但这也带来了一些挑战&#xff0c;比如减少幻觉、管理对话流程、在测试期间留意智能体的工作方式、允许人工介入以及评估其性能。你需要进行大量的反复试验。 在这篇博客〔原作者&a…...

编程新知 2025/10/23 9:35:00