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

Vue:filters过滤器

        日期、时间格式化是Vue前端项目中较为常遇到的一个需求点,此处,围绕Vue的过滤器来介绍如何更为优雅的解决此类需求。

过滤器filters使用注意点

        Vue允许开发者自定义过滤器,可以实现一些常见的文本格式化等需求。

        使用时要注意的点在于:过滤器可使用在两个地方——①双花括号插值表达式;②v-bind表达式。另一个是过滤器书写的位置:应在JavaScript表达式的尾部,并且使用管道符与表达式进行分割开来

        例如:假定我们已经定义了一个过滤器,名称为:dateTimeFormat,用于日期时间的格式化操作,那么在使用时的书写方式如下,

 

<div class="left">{{ JavaScript表达式 | dateTimeFormat  }}</div>

        显示的效果如下,

过滤器filters的两种定义方式

        接下里我们看一下过滤器的定义方式,Vue.js官网文档提供了两种方式,

方式1:局部定义

        局部定义类似于组件的局部注册操作,只能在当前组件内部使用。

        以下我们对上面提到的dateTimeFormat过滤器进行定义,这里要使用到一个第三方库moment.js,安装方式如下,

npm install moment -S

        安装之后直接在局部组件中引入即可。

import moment from 'moment'

        接着,我们开始定义过滤器dateTimeFormat,完整的示例代码如下,

<template><div class="left">{{ currentDate | dateTimeFormat  }}</div>
</template>
<script>
import moment from 'moment'
export default {name: "Top",props: {},filters: {dateTimeFormat: function (value, pattern = 'YYYY-MM-DD HH:mm:ss') {return moment(value).format(pattern);}},data() {return {timerHandler: -1,currentDate: null,}},computed: {title() {return process.env.VUE_APP_TITLE;},moduleName() {return this.$store.state.module_name;},},mounted() {this.getCurrentDate();this.setTimter();},methods: {setTimter() {this.timerHandler = setInterval(() => {this.getCurrentDate();}, 1000);},getCurrentDate() {this.currentDate = Date.now();}},beforeUpdate() {},beforeDestroy() {clearInterval(this.timerHandler);}
}
</script>
<style lang="less" scoped>
</style>

方式2:全局定义

        接着,我们看一下如何进行全局的过滤器定义,

/** @Description: * @Author: Xwd* @Date: 2023-02-15 22:26:06* @LastEditors: Xwd* @LastEditTime: 2023-02-18 14:53:58*/
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import moment from 'moment'
Vue.config.productionTip = false//定义全局过滤器
Vue.filter("dateTimeFormat",(value,pattern='YYYY-MM-DD HH:mm:ss')=>{return moment(value).format(pattern);
})new Vue({router,store,render: h => h(App)
}).$mount('#app')

        最终效果是一致的,不同之处在于,全局定义的过滤器可以在项目中的任何组件中进行使用。

 

相关文章:

Vue:filters过滤器

日期、时间格式化是Vue前端项目中较为常遇到的一个需求点&#xff0c;此处&#xff0c;围绕Vue的过滤器来介绍如何更为优雅的解决此类需求。 过滤器filters使用注意点 Vue允许开发者自定义过滤器&#xff0c;可以实现一些常见的文本格式化等需求。 使用时要注意的点在于&#…...

Windows环境下安装和配置Gradle

1. 概述 Gradle是Google公司基于JVM开发的一款项目构建工具&#xff0c;支持Maven&#xff0c;JCenter多种第三方仓库&#xff0c;支持传递性依赖管理&#xff0c;使用更加简洁和支持多种语言的build脚步文件&#xff0c;更多详情可以参阅Gradle官网 2. 下载 由于Gradle与S…...

数据结构时间空间复杂度笔记

&#x1f57a;作者&#xff1a; 迷茫的启明星 本篇内容&#xff1a;数据结构时间空间复杂度笔记 &#x1f618;欢迎关注&#xff1a;&#x1f44d;点赞&#x1f64c;收藏✍️留言 &#x1f3c7;家人们&#xff0c;码字不易&#xff0c;你的&#x1f44d;点赞&#x1f64c;收藏❤…...

基于注意力的知识蒸馏Attention Transfer原理与代码解析

paper&#xff1a;Paying More Attention to Attention: Improving the Performance of Convolutional Neural Networks via Attention Transfercode&#xff1a;https://github.com/megvii-research/mdistiller/blob/master/mdistiller/distillers/AT.py背景一个流行的假设是存…...

利尔达在北交所上市:总市值突破29亿元,叶文光为董事长

2月17日&#xff0c;利尔达科技集团股份有限公司&#xff08;下称“利尔达”&#xff0c;BJ:832149&#xff09;在北京证券交易所上市。本次上市&#xff0c;利尔达的发行价格为5.00元/股&#xff0c;发行数量为1980万股&#xff0c;发行市盈率为12.29倍&#xff0c;募资总额为…...

C#操作字符串方法 [万余字总结 · 详细]

C#操作字符串方法总结C#常用字符串函数大全C#常用字符串操作方法C#操作字符串方法总结C#常用字符串函数大全 Compare 比较字符串的内容&#xff0c;考虑文化背景(场所)&#xff0c;确定某些字符是否相等 CompareOrdinal 与Compare一样&#xff0c;但不考虑文化背景 Format 格…...

极兔一面:10亿级ES海量搜索狂飙10倍,该怎么办?

背景说明&#xff1a; ES高性能全文索引&#xff0c;如果不会用&#xff0c;或者没有用过&#xff0c;在面试中&#xff0c;会非常吃亏。 所以ES的实操和底层原理&#xff0c;大家要好好准备。 另外&#xff0c;ES调优是一个非常、非常核心的面试知识点&#xff0c;大家要非…...

【Mysql基础 —— SQL语句(一)】

文章目录概述使用启动/停止mysql服务连接mysql客户端数据模型SQLSQL语句分类DDL数据库操作表操作查询创建数据类型修改删除DML添加数据修改数据删除数据DQL基础查询条件查询聚合函数分组查询排序查询分页查询执行顺序DCL管理用户权限控制概述 数据库&#xff08;Database&#…...

华为OD机试 - 新员工座位安排系统(Python) | 机试题算法思路

最近更新的博客 华为OD机试 - 招聘(Python) | 备考思路,刷题要点,答疑 【新解法】华为OD机试 - 五键键盘 | 备考思路,刷题要点,答疑 【新解法】华为OD机试 - 热点网络统计 | 备考思路,刷题要点,答疑 【新解法】华为OD机试 - 路灯照明 | 备考思路,刷题要点,答疑 【新解…...

MySQL - 介绍

前言 本篇介绍认识MySQL&#xff0c;重装mysql操作 如有错误&#xff0c;请在评论区指正&#xff0c;让我们一起交流&#xff0c;共同进步&#xff01; 本文开始 1.什么是数据库? 数据库: 一种通过SQL语言操作管理数据的软件; 重装数据库的卸载数据库步骤 : ① 停止MySQL服…...

ChatGPT国内镜像站初体验:聊天、Python代码生成等

ChatGPT国内镜像站初体验&#xff0c;聊天、Python代码生成。 (本文获得CSDN质量评分【92】)【学习的细节是欢悦的历程】Python 官网&#xff1a;https://www.python.org/ Free&#xff1a;大咖免费“圣经”教程《 python 完全自学教程》&#xff0c;不仅仅是基础那么简单………...

SAP数据导入工具(LSMW) 超级详细教程(批量导入内部订单)

目录 第一步&#xff1a;记录批导步骤编辑数据源对应字段 第二步&#xff1a;维护数据源 第三步&#xff1a;维护数据源对应字段&#xff08;重要&#xff09; 第四步&#xff1a;维护数据源关系。 第五步&#xff1a;维护数据源与导入字段的对应关系。 第六步&#xff0…...

第9天-商品服务(电商核心概念,属性分组开发及分类和品牌的级联更新)

1.电商核心概念 1.1.SPU与SKU SPU&#xff1a;Standard Product Unit&#xff08;标准化产品单元&#xff09; 是商品信息聚合的最小单位&#xff0c;是一组可复用、易检索的标准化信息的集合&#xff0c;该集合描述了一个 产品的特性。 决定商品属性的值 SKU&#xff1a;Stock…...

动漫人物眼睛画法

本期的动漫绘画课程教大家来学习动漫人物眼睛画法&#xff0c;结合板绘软件从草稿开始一步步教你画出动漫人物眼睛&#xff0c;不用报动漫培训班也能学会&#xff0c;快来跟着本期的动漫人物眼睛画法教程试试吧&#xff01; 动漫人物眼睛画法步骤教程&#xff1a; 注意&#x…...

张晨光-JAVA零基础保姆式JDBC技术教程

JDBC文档 JDBC概述 JDBC概述 Java DataBase Connectivity Java 数据库连接技术 JDBC的作用 通过Java语言操作数据库&#xff0c;操作表中的数据 SUN公司为**了简化、**统一对数据库的操作&#xff0c;定义了一套Java操作数据库的规范&#xff0c;称之为JDBC JDBC的本质 是官方…...

华为OD机试 - 最多提取子串数目(Python)

最多提取子串数目 题目 给定由 [a-z] 26 个英文小写字母组成的字符串 A 和 B,其中 A 中可能存在重复字母,B 中不会存在重复字母 现从字符串 A 中按规则挑选一些字母,可以组成字符串 B。 挑选规则如下: 1) 同一个位置的字母只能被挑选一次 2) 被挑选字母的相对先后顺序不…...

LeetCode-1237. 找出给定方程的正整数解【双指针,二分查找】

LeetCode-1237. 找出给定方程的正整数解【双指针&#xff0c;二分查找】题目描述&#xff1a;解题思路一&#xff1a;双指针。首先我们不管f是什么&#xff0c;即function_id等于什么不管。但是我们可以调用customfunction中的f函数&#xff0c;然后我们遍历x,y(1 < x, y &l…...

广度优先搜索算法 - 迷宫找路

广度优先搜索算法1 思考问题1.1 这个迷宫需不需要指定入口和出口&#xff1f;2 先粗略实现2.1 源码2.2 源码解释3 优化代码3.1 优化读取文件部分3.2 增加错误处理4 再优化-让程序变得更加灵活4.1 用户外部可以循环输入入口和出口5 完整代码这是一个提问者的提出的问题&#xff…...

泡脚材料简记

文章目录一般条件中药包&#xff08;药粉&#xff09;泡脚丸中药包&#xff08;药材&#xff09;艾叶生姜益母草藏红花食盐花椒白醋柠檬藿香泡脚私方紫苏叶、白术、白芍、黄芪、青皮、柴胡、夜交藤、丹参、当归&#xff0c;每种各10g艾叶、花椒、肉桂、桂枝、红花干姜30克、小茴…...

【计算机网络】因特网概述

文章目录因特网概述网络、互联网和因特网互联网历史与ISP标准化与RFC因特网的组成三种交换方式电路交换分组交换和报文交换三种交换方式的对比与总结计算机网络的定义和分类计算机网络的定义计算机网络的分类计算机网络的性能指标速率带宽吞吐量时延时延带宽积往返时间利用率丢…...

提升开发效率与视觉舒适度:LxgwWenKai字体全场景配置指南

提升开发效率与视觉舒适度&#xff1a;LxgwWenKai字体全场景配置指南 【免费下载链接】LxgwWenKai LxgwWenKai: 这是一个开源的中文字体项目&#xff0c;提供了多种版本的字体文件&#xff0c;适用于不同的使用场景&#xff0c;包括屏幕阅读、轻便版、GB规范字形和TC旧字形版。…...

3步打造开源工具效率引擎:QtScrcpy自定义配置全指南

3步打造开源工具效率引擎&#xff1a;QtScrcpy自定义配置全指南 【免费下载链接】QtScrcpy Android实时投屏软件&#xff0c;此应用程序提供USB(或通过TCP/IP)连接的Android设备的显示和控制。它不需要任何root访问权限 项目地址: https://gitcode.com/barry-ran/QtScrcpy …...

Qwen3.5-4B-Claude-Opus企业实操:数据治理元数据血缘关系推理补全工具

Qwen3.5-4B-Claude-Opus企业实操&#xff1a;数据治理元数据血缘关系推理补全工具 1. 平台概述 Qwen3.5-4B-Claude-4.6-Opus-Reasoning-Distilled-GGUF是基于Qwen3.5-4B架构的推理蒸馏模型&#xff0c;专门针对企业级数据治理场景中的元数据血缘关系分析任务进行了优化。该模…...

ESP8266嵌入式JavaScript引擎:零内存分配的确定性JS执行

1. 项目概述 ESP8266-Arduino-JavaScript 是一个面向 ESP8266 平台的轻量级嵌入式 JavaScript 引擎库&#xff0c;其核心目标并非在微控制器上完整复刻 V8 或 SpiderMonkey 的功能&#xff0c;而是为资源受限的 IoT 设备提供一种 可预测、内存可控、无动态分配、零依赖 的脚本…...

浏览器自动化:OpenClaw+GLM-4.7-Flash爬取数据并生成报告

浏览器自动化&#xff1a;OpenClawGLM-4.7-Flash爬取数据并生成报告 1. 为什么选择OpenClaw做浏览器自动化&#xff1f; 去年我接手了一个每周都要重复的数据分析任务&#xff1a;登录内部系统导出销售数据&#xff0c;清洗后生成可视化报告。这种机械劳动不仅耗时&#xff0…...

Nginx反向代理实战:不改代码轻松解决前后端跨域问题(附完整配置模板)

Nginx反向代理实战&#xff1a;不改代码轻松解决前后端跨域问题&#xff08;附完整配置模板&#xff09; 前后端分离架构已成为现代Web开发的主流模式&#xff0c;但随之而来的跨域问题却让不少开发者头疼。想象一下这样的场景&#xff1a;你的前端运行在https://frontend.com&…...

Pixel Mind Decoder 多模型协作:与Ollama本地模型联合作业

Pixel Mind Decoder 多模型协作&#xff1a;与Ollama本地模型联合作业 1. 引言&#xff1a;当AI模型开始团队合作 想象一下这样的场景&#xff1a;你手头有一份长达50页的市场调研报告&#xff0c;需要快速提炼核心观点并分析其中的情绪倾向。传统做法可能需要先人工阅读总结…...

OpenClaw数据安全实践:Qwen3-32B+RTX4090D本地化处理敏感财报

OpenClaw数据安全实践&#xff1a;Qwen3-32BRTX4090D本地化处理敏感财报 1. 为什么金融从业者需要本地化AI处理 去年我在帮一家私募基金做季度财报分析时&#xff0c;遇到了一个尴尬场景&#xff1a;当我把客户PDF财报上传到某公有云AI平台提取关键指标后&#xff0c;第二天就…...

H3C无线调优案例

用户报无线经常掉线&#xff0c;用户现场无线用的H3C 首先登录无线控制器搜集对应接入体验差的AP的诊断日志&#xff0c;从日志中可以看到AP有线上行口的组播广播包数量远远超过了单播报文&#xff1b;没有CRC错误报文&#xff0c;说明网线质量没有问题。接着看&#xff1a;我们…...

RAG知识库落地秘籍:从零到一打造企业智能问答系统,提升效率与用户体验!

有幸参与并主导实施的第二个AI 大模型应用项目就是“AI知识库”或者叫“智能问答”&#xff0c;也是接下来要介绍的内容。整篇文章将围绕着以下几个议题进行展开&#xff0c;内容上更侧重概念理解、落地方法路径、实施效果保障以及经验总结&#xff0c;不会在这里探讨具体技术细…...