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

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

前言

上篇文件讲述了,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:并没有改变原来的数据,是产生新的对应的数据

相关文章:

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

前言 上篇文件讲述了,Vue全局过滤器的基本使用:Vue过滤器的基本使用 本篇将延续上文,讲述vue中过滤器的进阶操作 过滤器传参 如果有一天,多个地方使用过滤器,而且需要传递参数,那么可以这么写 多个过滤…...

财报解读:涅槃重生之后,新东方还想再造一个“文旅甄选”?

新东方逐渐走出了“微笑曲线”。 图源:新东方2023财年Q3财报 2023年4月19日,新东方披露了2023财年Q3财报(截至2023年2月28日止),营收7.5亿美元,同比增长22.8%;归母净利润为8165万美元&#xff…...

华为OD机试 - 过滤组合字符串(Python)

题目描述 每个数字关联多个字母,关联关系如下: 0 关联 “a”,”b”,”c” 1 关联 “d”,”e”,”f” 2 关联 “g”,”h”,”i” 3 关联 “j”,”k”,”l” 4 关联 “m”,”n”,”o” 5 关联 “p”,”q”,”r” 6 关联 “s”,”t” 7 关联 “u”,”v” 8 关联 “w”,”x” 9 …...

maven简单使用

实验课的作业用一大堆框架/库,统统要用maven管理。 头一次用,真痛苦。 所幸得以解决,maven真香~ 一步一步来。 1. maven 不是java人,只能说说粗浅的理解了。 简单来说,maven是一个管理项目的工具&…...

HTML学习笔记一

目录 HTML学习笔记 一、HTML标签 1、HTML语法规范 1.1标签的语法概述 1.2标签关系 2、HTML基本结构标签 2.1第一个HTML 2.2基本结构标签总结 3、开发工具 4、HTML常用标签 4.1标签的语义 4.2标题标签 4.3段落和换行标签 4.4文本格式化标签 4.5div和span标签 4.…...

人工智能十大流行算法,通俗易懂讲明白

人工智能是什么?很多人都知道,但大多又都说不清楚。 事实上,人工智能已经存在于我们生活中很久了。 比如我们常常用到的邮箱,其中垃圾邮件过滤就是依靠人工智能;比如每个智能手机都配备的指纹识别或人脸识别&#x…...

支持中英双语和多种插件的开源对话语言模型,160亿参数

一、开源项目简介 MOSS是一个支持中英双语和多种插件的开源对话语言模型,moss-moon系列模型具有160亿参数,在FP16精度下可在单张A100/A800或两张3090显卡运行,在INT4/8精度下可在单张3090显卡运行。MOSS基座语言模型在约七千亿中英文以及代码…...

SQL基础培训10-复杂查询原理

知识点: 1、SQL查询语句逻辑执行顺序 下面是一个查询语句的逻辑执行顺序(每段语句都标明了执行顺序号): 执行1:FROM 执行2:...

如何搭建信息存储中心?资源共享方案之搭建ftp个人服务器

serveru是一款由Rob Beckers开发的ftp服务器软件,全称为:serv-u ftp server,它功能强大又易于使用。ftp服务器用户通过ftp协议能在internet上共享文件。FTP协议是专门针对在两个系统之间传输大的文件开发出来的,它是TCP/IP协议的一…...

【LeetCode】188. 买卖股票的最佳时机 IV

188. 买卖股票的最佳时机 IV(困难) 思路 状态定义 一、首先确定要一天会有几种状态,不难想到有四种: a.当天买入了股票;b.当天卖出了股票;c.当天没有操作,但是之前是买入股票的状态&#xff…...

android studio RadioButton单选按钮

1.定义 <!--单选按钮--> <TextViewandroid:layout_marginTop"10dp"android:layout_width"match_parent"android:layout_height"wrap_content"android:text"请选择你的性别&#xff1a;"> </TextView> <RadioGrou…...

AI大模型快速发展,我们该如何应对?

文章目录 提问问题范例Prompt 公式 如何准确提问 随着人工智能技术的不断发展&#xff0c;聊天型大语言模型工具如 ChatGPT 在解决各种实际问题时具有越来越广泛的应用。这一技术的快速发展&#xff0c;不仅带来了更高的工作效率和更高的精度&#xff0c;同时也改变了人类的工作…...

java多线程BlockingDeque的三种线程安全正确退出方法

本文介绍两种BlockingDeque在多线程任务处理时正确结束的方法 一般最开始简单的多线程处理任务过程 把总任务放入BlockingDeque创建多个线程&#xff0c;每个线程内逻辑时&#xff0c;判断BlockingDeque任务是否处理完&#xff0c;处理完退出&#xff0c;还有任务就BlockingDe…...

从STM32F407到AT32F407(一)

雅特力公司的MCU有着性能超群&#xff0c;价格优越的巨大优势&#xff0c;缺点是相关资料少一些&#xff0c;我们可以充分利用ST的现有资源来开发它。 我用雅特力的STM32F437开发板&#xff0c;使用原子 stm32f407的开发板自带程序&#xff0c;测试串口程序&#xff0c;原设定…...

【数据结构】顺序表和链表基本实现(含全代码)

文章目录 一、什么是线性表1. 什么是顺序表动态开辟空间和数组的问题解释LeetCode-exercise 2. 什么是链表2.1链表的分类2.2常用的链表结构及区别2.3无头单向非循环链表的实现2.4带头双向循环链表的实现2.5循序表和链表的区别LeetCode-exercise 3. 快慢指针LeetCode-exercise 一…...

CMake : Linux 搭建开发 - g++、gdb

目录 1、环境搭建 1.1 编译器 GCC&#xff0c;调试器 GDB 1.2 CMake 2、G 编译 2.1 编译过程 编译预处理 *.i 编译 *.s 汇编 *.o 链接 bin 2.2 G 参数 -g -O[n] -l、-L -I -Wall、-w -o -D -fpic 3、GDB 调试器 3.1 调试命令参数 4、CMake 4.1 含义 4.2…...

大数据实战 --- 美团外卖平台数据分析

目录 开发环境 数据描述 功能需求 数据准备 数据分析 RDD操作 Spark SQL操作 创建Hbase数据表 创建外部表 统计查询 开发环境 HadoopHiveSparkHBase 启动Hadoop&#xff1a;start-all.sh 启动zookeeper&#xff1a;zkServer.sh start 启动Hive&#xff1a; nohup …...

三大本土化战略支点,大陆集团扩大中国市场生态合作「朋友圈」

“在中国&#xff0c;大陆集团已经走过30余年的发展与耕耘历程&#xff0c;并在过去10年间投资了超过30亿欧元。中国市场也成为了我们重要的‘增长引擎’与‘定海神针’。未来&#xff0c;我们将继续深耕中国这个技术导向的市场。”4月19日上海车展上&#xff0c;大陆集团首席执…...

为什么停更ROS2机器人课程-2023-

机器人工匠阿杰肺腑之言&#xff1a; 我放弃了ROS2课程 真正的危机不是同行竞争&#xff0c;比如教育从业者相互竞争不会催生ChatGPT…… 技术变革的突破式发展通常是新势力带来的而非传统行业的升级改革。 2013年也就是10年前在当时主流视频网站开启分享&#xff1a; 比如 …...

【SpringCloud常见面试题】

SpringCloud常见面试题 1.微服务篇1.1.SpringCloud常见组件有哪些&#xff1f;1.2.Nacos的服务注册表结构是怎样的&#xff1f;1.3.Nacos如何支撑阿里内部数十万服务注册压力&#xff1f;1.4.Nacos如何避免并发读写冲突问题&#xff1f;1.5.Nacos与Eureka的区别有哪些&#xff…...

测试微信模版消息推送

进入“开发接口管理”--“公众平台测试账号”&#xff0c;无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息&#xff1a; 关注测试号&#xff1a;扫二维码关注测试号。 发送模版消息&#xff1a; import requests da…...

树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法

树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作&#xff0c;无需更改相机配置。但是&#xff0c;一…...

反向工程与模型迁移:打造未来商品详情API的可持续创新体系

在电商行业蓬勃发展的当下&#xff0c;商品详情API作为连接电商平台与开发者、商家及用户的关键纽带&#xff0c;其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息&#xff08;如名称、价格、库存等&#xff09;的获取与展示&#xff0c;已难以满足市场对个性化、智能…...

React第五十七节 Router中RouterProvider使用详解及注意事项

前言 在 React Router v6.4 中&#xff0c;RouterProvider 是一个核心组件&#xff0c;用于提供基于数据路由&#xff08;data routers&#xff09;的新型路由方案。 它替代了传统的 <BrowserRouter>&#xff0c;支持更强大的数据加载和操作功能&#xff08;如 loader 和…...

PPT|230页| 制造集团企业供应链端到端的数字化解决方案:从需求到结算的全链路业务闭环构建

制造业采购供应链管理是企业运营的核心环节&#xff0c;供应链协同管理在供应链上下游企业之间建立紧密的合作关系&#xff0c;通过信息共享、资源整合、业务协同等方式&#xff0c;实现供应链的全面管理和优化&#xff0c;提高供应链的效率和透明度&#xff0c;降低供应链的成…...

大数据零基础学习day1之环境准备和大数据初步理解

学习大数据会使用到多台Linux服务器。 一、环境准备 1、VMware 基于VMware构建Linux虚拟机 是大数据从业者或者IT从业者的必备技能之一也是成本低廉的方案 所以VMware虚拟机方案是必须要学习的。 &#xff08;1&#xff09;设置网关 打开VMware虚拟机&#xff0c;点击编辑…...

2021-03-15 iview一些问题

1.iview 在使用tree组件时&#xff0c;发现没有set类的方法&#xff0c;只有get&#xff0c;那么要改变tree值&#xff0c;只能遍历treeData&#xff0c;递归修改treeData的checked&#xff0c;发现无法更改&#xff0c;原因在于check模式下&#xff0c;子元素的勾选状态跟父节…...

用docker来安装部署freeswitch记录

今天刚才测试一个callcenter的项目&#xff0c;所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...

C++课设:简易日历程序(支持传统节假日 + 二十四节气 + 个人纪念日管理)

名人说:路漫漫其修远兮,吾将上下而求索。—— 屈原《离骚》 创作者:Code_流苏(CSDN)(一个喜欢古诗词和编程的Coder😊) 专栏介绍:《编程项目实战》 目录 一、为什么要开发一个日历程序?1. 深入理解时间算法2. 练习面向对象设计3. 学习数据结构应用二、核心算法深度解析…...

GitHub 趋势日报 (2025年06月06日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 590 cognee 551 onlook 399 project-based-learning 348 build-your-own-x 320 ne…...