【Vue项目】filters过滤器

在vue项目中需要对一些数据进行格式化,我们可以通过Vue.filter进行过滤

Vue.filter

过滤器在 Vue 实例中使用 Vue.filter 方法进行注册,注册成功就可以在任何 Vue模板中使用这些过滤器来对数据进行处理和格式化。

Vue项目中,过滤器可以在全局范围和局部范围内使用。

全局过滤器

全局过滤器是在 Vue 实例化之前定义的过滤器,它们可以在整个 Vue 应用程序中的任何组件中使用。通常在 Vue 实例化之前,通过 Vue.filter 方法来定义全局过滤器。例如:
在utils文件夹中创建filter.js文件:

// /src/utils/filter.js
import Vue from 'vue';
import moment from 'moment';
import 'moment/locale/zh-cn';
import 'moment/locale/zh-tw';
import 'moment/locale/en';
const defaultLang = 'zh-tw'
const currentLang = localStorage.getItem('lang') || defaultLang
// 设置moment插件是用当前语言
moment.locale(currentLang);Vue.filter('dayjs', function (dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') {return moment(dataStr).format(pattern);
});

把filter.js文件作为模块引入main.js

import Vue from 'vue'
import i18n from './i18n'
import App from './App.vue'
import store from './store/'
import router from './router'
// 项目全局配置
import './utils/filter'
...
new Vue({router,store,i18n,render: h => h(App)
}).$mount('#app')

可以在整个项目其他vue实例中使用:

<template><div><p>{{ someDate | dayjs }}</p></div>
</template>

在这个示例中,我们定义了一个名为 dayjs 的全局过滤器,用于将日期格式化为指定的格式。在任何 Vue 组件中,只要使用了 dayjs 这个过滤器,它都会生效。这里做了多语言化

局部过滤器

局部过滤器是在组件的选项中定义的过滤器,它们只能在当前组件的模板中使用。在组件的选项中,通过 filters 属性来定义局部过滤器。例如:

<template><div><p>{{ someDate | dayjs }}</p></div>
</template><script>
import moment from 'moment';
// moment多语言包
import 'moment/locale/zh-cn';
import 'moment/locale/zh-tw';
import 'moment/locale/en';
const defaultLang = 'zh-tw'
const currentLang = localStorage.getItem('lang') || defaultLang
// 设置moment插件是用当前语言
moment.locale(currentLang);export default {data() {return {someDate: '2022-01-01'};},filters: {dayjs(dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') {return moment(dataStr).format(pattern);}}
}
</script>

在这个示例中,我们在组件的选项中定义了一个名为 dayjs 的局部过滤器。在模板中使用 dayjs 过滤器时,它只能在当前组件中生效。

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

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

相关文章

05.坐标系

1. 坐标系原点 坐标系原点就是屏幕/窗口的左上角&#xff0c;X向右增长&#xff0c;Y向下增长。 2.设置控件位置 设置控件位置&#xff0c;就相当于是需要指定控件的坐标&#xff0c;对于该控件来说&#xff0c;其坐标原点是其父窗口/父控件的左上角。 设置方法就是通过控件的…

创新S3存储桶检索:Langchain社区S3加载器搭载OpenAI API

在瞬息万变的数据存储和处理领域&#xff0c;将高效的云存储解决方案与先进的 AI 功能相结合&#xff0c;为处理大量数据提供了一种变革性的方法。本文演示了使用 MinIO、Langchain 和 OpenAI 的 GPT-3.5 模型的实际实现&#xff0c;重点总结了存储在 MinIO 存储桶中的文档。 …

leetcode:62.不同路径

动态规划 注意&#xff1a;用深搜或者广搜会超时 dp含义dp[i,j]&#xff1a;从&#xff08;0&#xff0c;0&#xff09;到&#xff08;i&#xff0c;j&#xff09;的路径个数 递推公式&#xff1a;dp[i][j] dp[i-1][j] dp[i][j-1] 初始化&#xff1a;for(i 0,i<m,i) …

[职场] 面试被问优点的回答参考 #知识分享#其他#学习方法

面试被问优点的回答参考 当面试官问你最大的优点是什么&#xff1f;回答1&#xff1a; 我擅长合理地安排时间&#xff0c; 作为助理&#xff0c; 我的杂事很多&#xff0c; 总是觉得手边有做不完的事情&#xff0c; 所以我特别注意时间管理&#xff0c; 这样才能高效地工作&am…

继承

1.继承的作用 有些类与类之间存在特殊关系&#xff0c;下级别的成员除了拥有上一级别的共性&#xff0c;还有自己的特性。 这个时候我们就可以考虑利用继承技术&#xff0c;减少重复代码。 总结&#xff1a; 继承的好处&#xff1a;可以减少重复的代码 class A : public B;…

猫头虎分享已解决Bug || KeyError: ‘The truth value of a Series is ambiguous‘

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通鸿蒙》 …

并发事务带来的问题及解决方法

引言 在数据库系统中&#xff0c;事务是指一组操作被视为一个逻辑单元&#xff0c;要么全部执行成功&#xff0c;要么全部不执行&#xff0c;保证数据库的一致性和完整性。而并发事务则是指多个事务同时执行的情况。虽然并发事务能够提高系统的性能和吞吐量&#xff0c;但也会…

EasyExcel动态列导出

测试代码地址&#xff1a;https://gitee.com/wangtianwen1996/cento-practice/tree/master/src/test/java/com/xiaobai/easyexcel/dynamiccolumn 官方文档&#xff1a;https://easyexcel.opensource.alibaba.com/docs/2.x/quickstart/write 一、实现方式 1、根据需要导出的列…

假期刷题打卡--Day26

1、MT1212乘法表 请编写一个简单程序&#xff0c;输出九九乘法表。输入n&#xff0c;就输出乘法表到n的地方。 格式 输入格式&#xff1a; 输入整型 输出格式&#xff1a; 输出整型。形式如&#xff1a;1*11 样例 1 输入&#xff1a; 5输出&#xff1a; 1*11 2*12 …

vue3项目中的404页面

vue3项目中的404页面 春节前的最后一篇技术博客了 写了不少vue项目&#xff0c;发现一直没有正确处理404页面。404页面的出现有这么几种可能&#xff1a; 错误输入了页面地址路由连接跳转时&#xff0c;某些路由已经不存在了&#xff0c;而程序员并没有正确处理 也就是说40…

effective c++ 笔记 条款13-18

条款13 以对象管理资源 对象的delete&#xff0c;可能因为前文的一些语句抛出异常或者过早的return(可能是最初的设计也可能多个迭代版本之后的维护导致)使得delete并没有执行&#xff0c;导致内存泄漏。 因此以对象管理资源。并采用RAII&#xff08;Resource Acquisition Is …

Rust基础拾遗--进阶

Rust基础拾遗 前言1.结构体2.枚举与模式3.运算符重载4.迭代器5.集合 前言 通过Rust程序设计-第二版笔记的形式对Rust相关重点知识进行汇总&#xff0c;读者通读此系列文章就可以轻松的把该语言基础捡起来。 1.结构体 2.枚举与模式 3.运算符重载 4.迭代器 5.集合

Shell - 学习笔记 - 2.10 - Shell字符串截取

Shell 截取字符串通常有两种方式&#xff1a;从指定位置开始截取和从指定字符&#xff08;子字符串&#xff09;开始截取。 从指定位置开始截取 这种方式需要两个参数&#xff1a;除了指定起始位置&#xff0c;还需要截取长度&#xff0c;才能最终确定要截取的字符串。 既然需要…

CSS基础---新手入门级详解

CSS:层叠样式表 CSS&#xff08;Cascading Style Sheets,层叠样式表&#xff09;&#xff0c;是一种用来为结构化文档添加样式&#xff08;字体、间距和颜色&#xff09;的计算机语言&#xff0c;css扩展名为.css。 实例: <!DOCTYPE html><html> <head><…

OpenAI---提示词工程的6大原则

OpenAI在官方的文档里上线了Prompt engineering&#xff0c;也就是提示词工程指南&#xff0c;其中OpenAI有提到写提示词的6条大的原则&#xff0c;它们分别是&#xff1a; &#xff08;1&#xff09;Write clear instructions&#xff08;写出清晰的指令&#xff09; &#xf…

STM32CubeMX,定时器之定时功能,入门学习,如何设置prescaler,以及timer计算PWM输入捕获方法(重要)

频率变小&#xff0c;周期变长 1&#xff0c;参考链接&#xff08;重要&#xff09; STM32CubeMX——定时器之定时功能&#xff08;学习使用timer定时器的设置&#xff09; STM32测量PWM信息&#xff08;学习使用设置pwm输入捕获&#xff09; 通用定时器中两个重要参数的设置心…

Pytorch+NCCL源码编译

目录 环境1. 安装cudnn2. 使用pytorch自带NCCL库进行编译3. 修改NCCL源代码并重新编译后测试&#xff0c;体现出源码更改 环境 Ubuntu 22.04.3 LTS (GNU/Linux 5.15.0-91-generic x86_64)cuda 11.8 cudnn 8python 3.10torch V2.0.1 nccl 2.14.3NVIDIA GeForce RTX 4090 *2 1.…

快速搭建 nfs 环境, 解决 nfs 搭建时的疑难杂症

博客原文 nfs 环境搭建 简介: NFS&#xff08;Network File System&#xff09;即网络文件系统&#xff0c;是FreeBSD支持的文件系统中的一种&#xff0c;它允许网络中的计算机之间共享资源。 在NFS的应用中&#xff0c;本地NFS的客户端应用可以透明地读写位于远端NFS服务器上…

[ai笔记2] 团年饭ai制图大比拼

欢迎来到文思源想的ai空间&#xff0c;这是技术老兵重学ai以及成长思考的第2篇分享&#xff01; 今天我们用国内七个大厂的ai制图工具做一下团年饭图片&#xff01; 1 团年饭ai制图大比拼 昨天期待了许久的ai春晚&#xff0c;并没有如期举行&#xff0c;换成了初一晚上&…

Vue源码系列讲解——模板编译篇【一】(综述)

目录 1. 前言 2. 什么是模板编译 3. 整体渲染流程 4. 模板编译内部流程 4.1 抽象语法树AST 4.2 具体流程 5. 总结 1. 前言 在前几篇文章中&#xff0c;我们介绍了Vue中的虚拟DOM以及虚拟DOM的patch(DOM-Diff)过程&#xff0c;而虚拟DOM存在的必要条件是得先有VNode&…