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

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

news 文章来源：https://blog.csdn.net/fuhao6363/article/details/129450126 2024/12/15 11:10:23

自定义指令补充

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

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

【已更新实例】Java网络爬虫-HttpClient工具类

关于用Java进行爬虫的资料网上实在少之又少&#xff0c;但作为以一名对Java刚刚初窥门径建立好兴趣的学生怎么能静得下心用新学的Python去写&#xff0c;毕竟Java是世界上最好的语言嘛 (狗头)关于Java爬虫最受欢迎的一个框架Jsoup常常搭配HttpClient来使用&#xff0c;因为Jsou…...

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

7.2 向量的坐标

&#x1f64c;作者简介&#xff1a;数学与计算机科学学院出身、在职高校高等数学专任教师&#xff0c;分享学习经验、生活、 努力成为像代码一样有逻辑的人&#xff01; &#x1f319;个人主页&#xff1a;阿芒的主页 ⭐ 高等数学专栏介绍&#xff1a;本专栏系统地梳理高等数学…...

编程日记 2023/3/11 12:48:15

公式编写1000问21-22

21.问: 求助——(周&#xff0c;日&#xff0c;60分钟&#xff0c;30分钟&#xff09;MACD同时向上的公式怎么表达 答(知无不言): z:“macd.dea#week”; r:“macd.dea#day”; f:“macd.dea#min60”; f1:“macd.dea#min30”; rz:“macd.dea##week”; rr:“macd.dea##day”; rf:“…...

编程日记 2023/3/11 12:47:12

1041 考试座位号

每个 PAT 考生在参加考试时都会被分配两个座位号&#xff0c;一个是试机座位&#xff0c;一个是考试座位。正常情况下&#xff0c;考生在入场时先得到试机座位号码&#xff0c;入座进入试机状态后&#xff0c;系统会显示该考生的考试座位号码&#xff0c;考试时考生需要换到考试…...

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

2023年3月北京/广州/杭州/深圳数据治理工程师认证DAMA-CDGA/CDGP

DAMA认证为数据管理专业人士提供职业目标晋升规划&#xff0c;彰显了职业发展里程碑及发展阶梯定义&#xff0c;帮助数据管理从业人士获得企业数字化转型战略下的必备职业能力&#xff0c;促进开展工作实践应用及实际问题解决&#xff0c;形成企业所需的新数字经济下的核心职业…...

编程日记 2023/3/11 12:45:06

【AICG】2、扩散模型 | 到底什么是扩散模型?

文章目录一、什么是扩散模型二、扩散模型相关定义2.1 符号和定义2.2 问题规范化三、可以提升的点参考论文&#xff1a;A Survey on Generative Diffusion Model github&#xff1a;https://github.com/chq1155/A-Survey-on-Generative-Diffusion-Model 一、什么是扩散模型 已…...

编程日记 2023/3/11 12:44:03

高等数学——多元函数微分学

文章目录多元函数微分学多元函数的极限多元函数的连续性偏导数定义高阶偏导数全微分定义全微分存在的必要条件全微分存在的充分条件多元函数的微分法复合函数微分法隐函数微分法多元函数的极值与最值无约束极值条件极值及拉格朗日乘数法最大值最小值二重积分概念性质计算利用直…...

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

一文打通Sleuth+Zipkin 服务链路追踪

1、为什么用 微服务架构是一个分布式架构&#xff0c;它按业务划分服务单元&#xff0c;一个分布式系统往往有很多个服务单元。由于服务单元数量众多&#xff0c;业务的复杂性&#xff0c;如果出现了错误和异常&#xff0c;很难去定位。主要体现在&#xff0c;一个请求可能需要…...

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

牛客刷题第一弹

1.异常处理 都是Throwable的子类&#xff1a; ①.Exception&#xff08;异常&#xff09;:是程序本身可以处理的异常。 ②.Error&#xff08;错误&#xff09;: 是程序无法处理的错误。这些错误表示故障发生于虚拟机自身、或者发生在虚拟机试图执行应用时&#xff0c;一般不需…...

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

K8s:通过 Kubeshark 体验 大白鲨(Wireshark)/TCPDump 监控 Kubernetes 集群

写在前面 分享一个 k8s 集群流量查看器很轻量的一个工具&#xff0c;监控方便博文内容涉及&#xff1a; Kubeshark 简单介绍Windows、Linux 下载运行监控DemoKubeshark 特性功能介绍 理解不足小伙伴帮忙指正 对每个人而言&#xff0c;真正的职责只有一个&#xff1a;找到自我。…...

编程日记 2023/3/11 12:39:48

做瞹网站/会计培训班

本系列博客合计 21 篇，每篇都将解析一张《信息资源管理》真卷，并附带答案解析与背诵技巧。 全国 2015 年 10 月自学考试信息资源管理试题（02378） 单选题 1、信息最本质的功能是信息可以通过一定的算法被加工成知识，并针对给定的目标被激活成求解问题的（B） A、情报 B、…...

编程日记 2024/12/15 10:47:20

处网站的建设/磁力在线搜索引擎

判断[_First,_Last)区间内的元素是否形成一个heap&#xff0c;意味着beg是最大值元素之一.使用operator<比较元素 判断[_First,_Last)区间内的元素是否形成一个heap&#xff0c;意味着beg是最大值元素之一.使用_Pred(elem1, elem2)完成比较&#xff0c;在elem1 < elem2的…...

编程日记 2024/12/15 9:38:17

营销型网站托管/百度提问首页

项目管理有五大过程组&#xff0c;十大知识领域&#xff0c;42个过程。其中42个过程记忆起来比较抽象&#xff0c;下面我们通过一个完整的项目管理&#xff0c;来分解下各个过程组的过程执行顺序&#xff0c;能帮助大家理解&#xff0c;有助于记忆的加深。​一、启动过程组1、制…...

编程日记 2024/12/15 6:56:00

中小企业网站建设/网络营销培训班

转自&#xff1a;软件客http://www.softwareer.com/news/109217.html“解聘”和“除名”看似结果相同&#xff0c;但依据劳动法的规定&#xff0c;却有本质区别&#xff0c;员工要擦亮眼睛保护权益。日 前&#xff0c;静安区法院对某贸易公司将员工刘小姐从“解聘”升格为“除名…...

编程日记 2024/12/15 5:19:37

建设代购彩票站网站/长春网站优化咨询

1. Dataframe的生成1.1 通过 toDF()函数创建SeqtoDFval someDF Seq((8, "bat"),(64, "mouse"),(-27, "horse")).toDF("number", "word")注意&#xff1a;如果直接用toDF()而不指定列名字&#xff0c;那么默认列名为"_…...

编程日记 2024/12/15 3:49:20

2013 中国网站建设市场 pdf/长沙百度快速优化排名

1&#xff09;实验平台&#xff1a;正点原子领航者ZYNQ开发板 2&#xff09;平台购买地址&#xff1a;https://item.taobao.com/item.htm?&id606160108761 3&#xff09;全套实验源码手册视频下载地址&#xff1a;http://www.openedv.com/thread-301505-1-1.html 4&#x…...

编程日记 2024/12/15 1:56:36