Vue中的过滤器(管道)

news2024/9/24 11:21:06

过滤器:将指定的数据,按照一套流程过滤加工,最后返回一个过滤之后的值

  1. 注册局部过滤器
    将过滤器写在filters配置项中的是局部过滤器,只供该vue匹配的容器使用

    new Vue({
    	el: '#root',
    	data: function(){
    		return {
    			time: 1670297916166
    		}
    	},
    	filters: {
    		dateFormat(value, str = 'YYYY-MM-DD') {
    			return dayjs(value).format(str);
    		}
    	}
    });
    
  2. 注册全局过滤器
    利用Vue.filter()声明的过滤器是全局过滤器,为所有vue实例共享,必须写在vue实例声明之前

    Vue.filter('dateFormat', function (value, str = 'YYYY-MM-DD') {
    	return dayjs(value).format(str);
    });
    Vue.filter('addChar', function (value, str = '#') {
    	return str + value;
    });
    new Vue({
    	el: '#root',
    	data: function(){
    		return {
    			time: 1670297916166
    		}
    	}
    });
    
  3. 使用场景
    一般在插值表达式、v-bind中使用

    <!-- 插值表达式 -->
    <p>不传参数:{{time | dateFormat}}</p>
    <p>传入自定义格式:{{time | dateFormat('YYYY-MM-DD HH:mm:ss')}}</p>
    

    在这里插入图片描述

    <!-- v-bind -->
    <p :title="time | dateFormat">不传参数</p>
    <p :title="time | dateFormat('YYYY-MM-DD HH:mm:ss')">传入自定义格式</p>
    

    在这里插入图片描述

  4. 多个过滤器可串联使用

    <p>串联:{{time | dateFormat('YYYY-MM-DD HH:mm:ss') | addChar('$')}}</p>
    

    在这里插入图片描述

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

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

相关文章

JVM之内存区域划分、类加载和垃圾回收

文章目录前言一、JVM内存区域划分二、类加载1.类加载是什么&#xff1f;2.类加载的过程3.何时触发类加载&#xff1f;4.双亲委派模型三、垃圾回收&#xff08;GC&#xff09;1.GC是什么&#xff1f;2.GC回收哪部分内容&#xff1f;3.怎么回收&#xff1f;&#xff08;1&#xf…

Rust 跑简单的例子

Rust 一门赋予每个人构建可靠且高效软件能力的语言 安装 curl --proto https --tlsv1.2 -sSf https://sh.rustup.rs | sh 提示失败 curl --proto https --tlsv1.2 -sSf https://sh.rustup.rs | sh info: downloading installer curl: (60) SSL certificate problem: certifi…

FastDFS搭建及整合Nginx实现文件上传

一、准备环境 FastDFS需要两个服务&#xff0c;一个tracker跟踪器&#xff0c;一个storage存储节点&#xff0c;tracker做调度配置&#xff0c;storage完成文件存储上传等功能。 这里我们使用两台虚拟机服务器&#xff08;centos 7)来部署&#xff0c;有条件的同学建议直接上云…

Vue中多条件图片路径通过Map存储获取避免嵌套if-else

场景 若依前后端分离版手把手教你本地搭建环境并运行项目&#xff1a; 若依前后端分离版手把手教你本地搭建环境并运行项目_霸道流氓气质的博客-CSDN博客_前后端分离项目本地运行 前端接收到后台数据之后需进行多个条件判断进而显示对应的图片路径。 比如先判断车辆的类型、…

第十三章:AQS

AQS 基础概念为什么 AQS 是 JUC 最重要的基石&#xff1f;AQS 能干什么AQS内部结构AQS内部类NodeAQS 源码分析以 lock方法为入口讲解nonfairTryAcquire 方法addWaiter方法线程B线程CacquireQueued 方法B节点C节点unlockcancelAcquire 方法总结AQS 基础概念 AQS 全称&#xff1…

【树莓派】了解wiringPi库、控制继电器

目录一、wiringPi库二、继电器1、继电器介绍及接线说明2、树莓派控制继电器一、wiringPi库 wiringPi是一个很棒的树莓派IO控制库&#xff0c;使用C语言开发&#xff0c;提供了丰富的接口&#xff1a;GPIO控制&#xff0c;中断&#xff0c;多线程等。 在树莓派命令行输入gpio -…

供应商管理软件有哪些特点和优势?

在这个快节奏的商业环境中&#xff0c;企业常常需要同时处理多个供应商。手动处理所有这些流程会有不少困难&#xff0c;为了克服这个问题&#xff0c;供应商管理软件是市场上可用的最佳解决方案。 好用的供应商管理软件&#xff0c;比如广受客户好评的8Manage SRM&#xff0c…

Spring 长事务导致connection closed,又熬了一个大夜!

大家好&#xff0c;我是不才陈某~ 是的&#xff0c;今早一到公司就收到了机器人的告警&#xff0c;从异常日志来看是数据库连接已关闭&#xff0c;然后我在解决这个问题的过程中发现了几个问题&#xff0c;不急&#xff0c;听我一一道来 异常被try后没有继续抛出&#xff0c;导…

CN_广域网WAN@PPP协议

文章目录WAN和LANPPP协议PPP协议有三个组成部分&#xff1a;LCPNCP成帧方法PPP帧的格式信息部分范围工作过程PPP协议特点透明传输WAN&InternetWAN和LAN WAN:广域网&#xff08;全写为 wide area network) 广 域 网局 域 网覆盖范围很广,通常跨区域较小,通常在一个区域内连…

Ubuntu内核OverlayFS权限逃逸漏洞(CVE-2021-3493)

文章目录前言关于linux kernel一、漏洞介绍二、漏洞原理三、漏洞影响版本四、漏洞复现五、修复方法前言 关于linux kernel Linux Kernel 一般指Linux内核。Linux是一种开源电脑操作系统内核。它是一个用C语言写成&#xff0c;符合POSIX标准的类Unix操作系统。 一、漏洞介绍 …

如何掌握HEC-RAS建模方法与涉河建设项目防洪评价报告编制

随着社会经济的快速发展&#xff0c;我国河道周边土地开发利用率不断增大&#xff0c;临河建筑物与日俱增&#xff0c;部分河道侵占严重&#xff0c;导致防洪压力增大。迫切需要对全国从事防洪评价咨询类的技术人员开展防洪评价技术方面的学习&#xff0c;为了让相关工程技术人…

深度学习-支持向量机(SVM)

1. 简介 在机器学习领域&#xff0c;支持向量机SVM(Support Vector Machine)是一个有监督的学习模型&#xff0c;通常用来进行模式识别、分类(异常值检测)以及回归分析。SVM算法中&#xff0c;我们将数据绘制在n维空间中&#xff08;n代表数据的特征数&#xff09;&#xff0c;…

C++ 函数指针探幽

首先看下面两个声明代表什么意思&#xff1f; double* (*(*pf)[2])(double*,int); double* (*pa[2])(double*,int);要搞清楚这两个式子&#xff0c;则先要清楚 指向指针的指针指针数组与指向数组的指针函数指针 指向指针的指针 指针的指针特殊点在于指向的是一个指针而已&am…

栈与队列2:用队列实现栈

主要是我自己刷题的一些记录过程。如果有错可以指出哦&#xff0c;大家一起进步。 转载代码随想录 原文链接&#xff1a; 代码随想录 leetcode链接&#xff1a;344. 反转字符串 题目&#xff1a; 请你仅使用两个队列实现一个后入先出&#xff08;LIFO&#xff09;的栈&#x…

计量经济学复习

计量经济学 习题&#xff08;史浩江版&#xff09; 习题一 一. 单项选择题 1、横截面数据是指&#xff08;A&#xff09;。 A 同一时点上不同统计单位相同统计指标组成的数据 B 同一时点上相同统计单位相同统计指标组成的数据 C 同一时点上相同统计单位不同统计指标组成的…

GPT-Chinese 复现

github 环境准备 conda -create gpt_cn python3.7 conda activate gpt_cnconda install pytorch1.10.0 torchvision0.11.0 torchaudio0.10.0 -c pytorch pip install -r requirements.txt错误 module distutils has no attribute version解决方案&#xff1a; pip uninstal…

[附源码]计算机毕业设计基于Springboot游戏交易平台

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…

MinIO实战

1.简介 MinIO 是一款基于Go语言发开的高性能、分布式的对象存储系统。客户端支持Java,Net,Python,Javacript, Golang语言。 2.部署 2.1单机器单节点&#xff08;docker&#xff09; 官网教程&#xff1a;https://min.io/docs/minio/container/index.html mkdir -p ~/minio/dat…

Node.js编程

Node.js编程 一、实验目的与要求 实验任务 用户信息增删改查 掌握数据库软件的安装了解集合、文档的概念掌握使用mongoose创建集合的方法创建集合掌握对数据库中的数据进行增删改查操作 二、实验任务和步骤 实验1. 用户信息增删改查 需求说明 (1)搭建网站服务器&#xf…

第十章 降维与度量学习

10.1 k近邻学习 k近邻学习&#xff08;kNN&#xff09;是一种常用的监督学习方法&#xff0c;其工作机制非常简单&#xff1a;给定测试样本&#xff0c;基于某种距离度量找出训练集中与其最靠近的k个训练样本&#xff0c;然后基于这k个邻居的信息来进行预测。 k近邻学习似乎与…