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

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

news 2025/12/11 17:48:42

自定义指令补充

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

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

网络编程（Modbus进阶）

思维导图 Modbus RTU&#xff08;先学一点理论&#xff09; 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议&#xff0c;由 Modicon 公司&#xff08;现施耐德电气&#xff09;于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…...

编程新知 2025/12/11 15:10:17

龙虎榜——20250610

上证指数放量收阴线&#xff0c;个股多数下跌&#xff0c;盘中受消息影响大幅波动。 深证指数放量收阴线形成顶分型&#xff0c;指数短线有调整的需求&#xff0c;大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技 代表标的&#xff1a;御银股份、雄帝科技 驱动…...

编程新知 2025/12/11 16:25:47

DockerHub与私有镜像仓库在容器化中的应用与管理

哈喽&#xff0c;大家好&#xff0c;我是左手python&#xff01; Docker Hub的应用与管理 Docker Hub的基本概念与使用方法 Docker Hub是Docker官方提供的一个公共镜像仓库&#xff0c;用户可以在其中找到各种操作系统、软件和应用的镜像。开发者可以通过Docker Hub轻松获取所…...

编程新知 2025/10/8 10:56:25

Linux相关概念和易错知识点（42）（TCP的连接管理、可靠性、面临复杂网络的处理）

目录 1.TCP的连接管理机制&#xff08;1&#xff09;三次握手①握手过程②对握手过程的理解 &#xff08;2&#xff09;四次挥手&#xff08;3&#xff09;握手和挥手的触发&#xff08;4&#xff09;状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...

编程新知 2025/12/9 0:43:27

1.3 VSCode安装与环境配置

进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件&#xff0c;然后打开终端&#xff0c;进入下载文件夹&#xff0c;键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...

编程新知 2025/12/9 2:37:58

镜像里切换为普通用户

如果你登录远程虚拟机默认就是 root 用户&#xff0c;但你不希望用 root 权限运行 ns-3&#xff08;这是对的&#xff0c;ns3 工具会拒绝 root&#xff09;&#xff0c;你可以按以下方法创建一个 非 root 用户账号 并切换到它运行 ns-3。 一次性解决方案&#xff1a;创建非 roo…...

编程新知 2025/9/11 11:00:29

sqlserver 根据指定字符 解析拼接字符串

DECLARE LotNo NVARCHAR(50)A,B,C DECLARE xml XML ( SELECT <x> REPLACE(LotNo, ,, </x><x>) </x> ) DECLARE ErrorCode NVARCHAR(50) -- 提取 XML 中的值 SELECT value x.value(., VARCHAR(MAX))…...

编程新知 2025/10/29 4:33:03

Unsafe Fileupload篇补充-木马的详细教程与木马分享（中国蚁剑方式）

在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件 本期内容是为了更好的为大家解释木马&#xff08;服务器方面的&#xff09;的原理&#xff0c;连接&#xff0c;以及各种木马及连接工具的分享 文件木马&#xff1a;https://w…...

编程新知 2025/12/10 16:19:48

C++.OpenGL （20/64）混合（Blending）

混合（Blending） 透明效果核心原理 #mermaid-svg-SWG0UzVfJms7Sm3e {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-icon{fill:#552222;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-text{fill…...

编程新知 2025/9/24 22:51:29

WebRTC从入门到实践 - 零基础教程

WebRTC从入门到实践 - 零基础教程 目录 WebRTC简介 基础概念 工作原理 开发环境搭建 基础实践 三个实战案例 常见问题解答 1. WebRTC简介 1.1 什么是WebRTC&#xff1f; WebRTC&#xff08;Web Real-Time Communication&#xff09;是一个支持网页浏览器进行实时语音…...

编程新知 2025/8/9 9:56:56