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

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

news 2026/3/26 20:08:01

自定义指令补充

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

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

工单系统已经上线，但 IT 管理并没有真正变好

在很多企业中&#xff0c;引入 IT 工单系统往往被视为 IT 管理升级的重要一步。 有了统一入口、有了记录机制、有了流程流转&#xff0c;看起来一切都开始变得规范起来。但实际运行一段时间后&#xff0c;不少团队会发现&#xff1a; 工单确实在增加&#xff0c;流程也在走&…...

编程新知 2026/3/26 19:33:23

BilibiliDown：B站音视频资源管理的全场景解决方案

BilibiliDown&#xff1a;B站音视频资源管理的全场景解决方案 【免费下载链接】BilibiliDown (GUI-多平台支持) B站 哔哩哔哩 视频下载器。支持稍后再看、收藏夹、UP主视频批量下载|Bilibili Video Downloader &#x1f633; 项目地址: https://gitcode.com/gh_mirrors/bi/Bi…...

编程新知 2026/3/26 18:30:37

Elasticsearch IK 分词器远程词典

一、背景 在使用 Elasticsearch IK 分词器进行中文检索时&#xff0c;默认词库往往无法覆盖业务中的专业词汇&#xff08;如&#xff1a;知识库、RAG架构、向量检索等&#xff09;。 如果不进行扩展&#xff0c;这些词可能被错误拆分&#xff0c;导致&#xff1a; 检索结果不准…...

编程新知 2026/3/26 18:22:28

FFXIV国际服中文补丁解决方案：零基础上手实战指南

FFXIV国际服中文补丁解决方案&#xff1a;零基础上手实战指南 【免费下载链接】FFXIVChnTextPatch 项目地址: https://gitcode.com/gh_mirrors/ff/FFXIVChnTextPatch 你是否曾在《最终幻想XIV》国际服中因语言障碍错失关键剧情&#xff1f;是否因英文界面降低了游戏沉浸…...

编程新知 2026/3/26 18:14:01

保姆级教程：在NUC12Pro上配置Ego_planner无人机自主飞行系统（含D435i与Pixhawk 6C）

在NUC12Pro上构建Ego_planner无人机自主飞行系统的全流程指南 当硬件堆满工作台时&#xff0c;最令人兴奋的莫过于将它们组装成一个能自主思考的飞行系统。本文将带您完成从零搭建基于NUC12Pro、D435i深度相机和Pixhawk 6C飞控的完整解决方案&#xff0c;重点解决那些官方文档从…...

编程新知 2026/3/26 18:03:55

【递归算法】全排列 Ⅱ

题目链接 文章摘要&#xff1a; 本文解析了LeetCode上"全排列II"问题&#xff0c;要求在包含重复数字的数组中返回所有不重复的全排列。通过分析决策树&#xff0c;指出需在标准全排列解法基础上增加剪枝策略&#xff0c;避免重复结果。详细讲解了两种剪枝思路&#…...

编程新知 2026/3/26 17:17:31

【机器人路径规划】基于6种最新算法（小龙虾优化算法COA、MSA、RTH、NOA、BFO、SWO）求解机器人路径规划研究附Matlab代码

✅作者简介&#xff1a;热爱科研的Matlab仿真开发者&#xff0c;擅长毕业设计辅导、数学建模、数据处理、建模仿真、程序设计、完整代码获取、论文复现及科研仿真。&#x1f34e; 往期回顾关注个人主页&#xff1a;Matlab科研工作室&#x1f447; 关注我领取海量matlab电子书和…...

编程新知 2026/3/26 16:31:13

Java并发面经（一）

1.Wait和Sleep的区别sleep () 是 Thread 类的静态方法&#xff0c;让当前线程休眠指定时间&#xff0c;不会释放持有的锁&#xff1b;wait () 是 Object 类的方法&#xff0c;会让当前线程释放锁&#xff0c;并进入等待队列&#xff0c;直到被 notify ()/notifyAll () 唤醒或超…...

编程新知 2026/3/26 15:34:14

终极指南：如何解决Cobalt Instagram下载失败问题 - 完整排查方案

终极指南&#xff1a;如何解决Cobalt Instagram下载失败问题 - 完整排查方案 Cobalt是一款强大的开源媒体下载工具&#xff0c;专为保存Instagram、YouTube、Twitter等平台的视频和图片而设计。然而&#xff0c;许多用户在使用Cobalt下载Instagram内容时经常遇到各种失败问题&…...

编程新知 2026/3/26 14:53:53

互联网大厂Java求职者面试全解析：技术点与场景详解

面试场景介绍 本文通过一场严肃的面试官与搞笑的水货程序员谢飞机之间的面试对话&#xff0c;带你深入了解互联网大厂Java面试的全套流程。涵盖Java核心语言与平台、Spring生态、微服务、安全、消息队列等热点技术&#xff0c;融合多种业务场景&#xff0c;如电商、内容社区、在…...

编程新知 2026/3/26 14:03:15