Vue-全局过滤器以及进阶操作

news2024/10/7 11:27:47

前言

上篇文件讲述了,Vue全局过滤器的基本使用:Vue过滤器的基本使用

本篇将延续上文,讲述vue中过滤器的进阶操作

过滤器传参

如果有一天,多个地方使用过滤器,而且需要传递参数,那么可以这么写

在这里插入图片描述

在这里插入图片描述

多个过滤器串联使用

多个过滤器直接是可以串联的,使用 |(管道符)xxx拼接即可
比如我要转化后截取当前年,就可以这么写

在这里插入图片描述

在这里插入图片描述

全局过滤器

现在写的filter过滤器,都是局部的,只能在vm中使用,但是如果有组件,比如组件A写了一个filterA过滤器,组件B写了一个filterB过滤器,那么组件B就不能使用filterA,当然组件A也不能使用filterB,如何解决这个问题呢,就要使用全局过滤器

在这里插入图片描述

通过例子验证说明局部过滤器,现在再写一个div容器创建一个vue实例

在这里插入图片描述

在这里插入图片描述

现在我觉得msg的内容太长了,想调用截取过滤器

在这里插入图片描述

看到报错了,说不能找到过滤器mySlice,强有力的证明了局部过滤器的局限性

在这里插入图片描述

如果想开启全局的过滤器配置,可以使用命令

    // 注册全局过滤器 注意:vue中过滤器是filters,在这里是filter
    //需要先准备过滤器再创建实例,顺序不能错
    Vue.filter('mySlice',function(value){
        return value.slice(0,4)
    })

在这里插入图片描述

查看页面,使用过滤器成功

在这里插入图片描述

v-bind使用过滤器

过滤器不止是只能写在插值语法里面的,还可以写在v-bind,但是通常这些写法比较少,下面一起看下把
比如这个例子,很明显有多余的字符,我就可以使用过滤器截取

在这里插入图片描述

查看页面,截取到了

在这里插入图片描述

只能配合插值语法或者v-bind使用!使用v-model会报错的!这里就不演示了

总结

过滤器
定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理,过于复杂的可以使用计算属性)
语法:
1:注册过滤器,Vue.filter(name,callback)或new Vue(filters:{})
2:使用过滤器:{{xxx | 过滤器名称}}或v-bind:属性=“xxx” | 过滤器名称
备注:
1:过滤器也可以接收额外参数,多个过滤器之间可以配合使用
2:并没有改变原来的数据,是产生新的对应的数据

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/461181.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

《Netty》从零开始学netty源码(四十三)之PoolChunk.allocate

allocate PoolChunk分配内存空间时可调用allocate方法来分配,具体的源码过程如下: 从代码中可以看出会根据分配的内存大小决定分配的是subpage还是normal的page,接下来具体分析以下方法: allocateSubpageallocateRuninitBuf …

Unity|| 如何把生存类游戏设计得更优秀

你是否曾经玩过这样的生存类游戏: 1、通过最初阶段后,你觉得游戏变得越来越简单 2、游戏的重点从生存转移到了基地建设或其他方面 诸如此类,很大程度上是由于糟糕的难度曲线所致。包括很多(非常受欢迎的)生存游戏都…

Redis——缓存更新策略

业务场景: 低一致性需求:使用内存淘汰机制。例如店铺类型的查询缓存,很少修改 高一致性需求:主动更新,并以超时剔除作为兜底方案。例如店铺详情查询的缓存,经常修改 主动更新策略 实际开发中最常用的还是…

51单片机(三)独立按键控制LED

❤️ 专栏简介:本专栏记录了从零学习单片机的过程,其中包括51单片机和STM32单片机两部分;建议先学习51单片机,其是STM32等高级单片机的基础;这样再学习STM32时才能融会贯通。 ☀️ 专栏适用人群 :适用于想要…

【SpringMVC源码三千问】DispatcherServlet源码解析

DispatcherServlet#doDispatch() 是 SpringMVC 处理请求分发的方法,只要是 spring mvc 处理的 http 请求,都会经过 DispatcherServlet 的请求分发处理,从而调用相应的 handler method。 DispatcherServlet#doDispatch() 源码分析&#xff1a…

PCL点云库(3) — common模块

目录 3.1 common模块中的头文件 3.2 common模块中的基本函数 (1)angle角度转换 (2)distance距离计算 (3)random随机数生成 (4)sping扩展模块 (5)time获…

请问你见过吐代码的泡泡吗(冒泡排序)

🤩本文作者:大家好,我是paperjie,感谢你阅读本文,欢迎一建三连哦。 🥰内容专栏:这里是《算法详解》,笔者用重金(时间和精力)打造,将算法知识一网打尽,希望可以…

现场工程师救火-UEFI(BIOS)节能设置导致金牌服务器只跑出龟速

近期协助出现场,解决了一个非常典型的UEFI 启动参数配置不当导致的服务器降效案例。错误的节能参数配置,导致价值几十万的服务器变成龟速服务器,并造成严重的生产事故。 1. 现象 朋友公司近期准备升级2010年就部署的服务器组,新…

vue移动端项目通用技巧

目录 一、配置文件 1.1、取消eslint校验 1.2、基础文件引入 1.3、iconfont引入svg使用 1.4、css的简化应用 1.5、内容溢出用省略号替代 1.6、非组件库的底部导航跳转 1.7、基础版轮播图 一、配置文件 1.1、取消eslint校验 在vue.config.js文件里: const …

【论文阅读】Robustness in Reinforcement Learning

原文为 Trustworthy Reinforcement Learning Against Intrinsic Vulnerabilities: Robustness, Safety, and Generalizability,是 2022 年 CMU 发表的综述文章。 本文主要关注文章的第二部分即鲁棒性 1. 概述 鲁棒性主要解决的问题是提高策略在面对不确定性或者对抗…

Linux:文件查看:《cat》《more》《less》《head》《tail》《wc》《grep》使用方法

同样是查看为什么要有这么多查看方法??? 因为他们的用法和扩功能肯定不一样,选择与你需要匹配的一条命令可以节省时间的同时更快速 cat 文件 可以直接查看文件内的内容 直接可以查看文件内的内容 要直接看更多的文件以空格隔开的…

AI大模型+低代码,在项目管理中的应用实践

随着ChatGPT大火之后,新的AI技术和模型被证明已经具备的很高的使用价值。 诸如Copilot、Midjourney、notion等产品通过AI的加持,已经让用户能够充分地在应用层面感受到了便利性。 原本几天的工作通过AI模型,可能只需要1分钟就能完成。可以大…

面试腾讯T7,被按在地上摩擦,鬼知道我经历了什么?

时间总是过得飞快,金三银四已经过去了,人们已经开始备战互联网大厂2023年的秋招计划了。刚好最近我有个小徒弟去腾讯面试的时候挂掉了,感觉被技术吊打。根据他的描述我复盘了一下,希望能给备战秋招的朋友一些帮助。 腾讯面试的内…

Leetcode——485. 最大连续 1 的个数

💯💯欢迎来到的热爱编程的小K的Leetcode的刷题专栏 文章目录 1、题目2、滑动窗口3、一次遍历(官方题解) 1、题目 题目:给定一个二进制数组 nums , 计算其中最大连续 1 的个数。 示例 1: 输入:nums [1,1,0…

生成对抗网络pix2pixGAN

1.介绍 论文:Image-to-Image Translation with Conditional Adversarial Networks 论文地址:https://arxiv.org/abs/1611.07004 图像处理的很多问题都是将一张输入的图片转变为一张对应的 输出图片,比如灰度图、彩色图之间的转换、图像自动…

【JavaEE】SpringMVC_day02

今日内容 完成SSM的整合开发能够理解并实现统一结果封装与统一异常处理能够完成前后台功能整合开发掌握拦截器的编写 1,SSM整合 前面我们已经把Mybatis、Spring和SpringMVC三个框架进行了学习,今天主要的内容就是把这三个框架整合在一起完成我们的业务功…

网络基础-IP和端口号以及认识传输层协议

概念回顾 MAC地址仅需要在同一个局域网下唯一,就可以保证不会出现通讯问题。 通信的目的是两台机器上的应用软件要通信。即客户端进程和服务端进程要获取这个数据,借助主机来完成通信。故将数据在主机间转发仅仅是手段,机器收到后&#xff…

为什么别的测试工程师年薪30W,而你做不到?

最近收到一位同学的私信: “看到了这个岗位想去应聘,但任职要求熟悉Shell、Python、Java其中的一种语言。软件测试工程师不是对编程代码要求不高吗?我如果学习应该选择Java还是Python?” 对于刚入行的测试新人来说,在求…

深入理解Linux内核(第三版)- 进程切换

为了控制进程的执行,内核必须有能力挂起正在CPU上运行的进程,并恢复以前挂起的某个进程的执行。这种行为被称为进程切换(process switch)、任务切换(task switch)或上下文切换(context switch&a…

手把手教你Java实现栈和队列

目录 一、栈(Stack) 1、概念 2、栈的使用 3、栈的模拟实现 4、栈的应用场景 2. 队列(Queue) 1、概念 2、队列的使用 3、队列模拟实现 4、循环队列 三、双端队列 (Deque) 五、栈和队列的互相实现 用队列实现栈: 用栈实现队列: 一、栈(St…