Vue-过滤器

article/2025/6/24 6:06:25

过滤器

时间戳格式化

实现方式

  • 计算属性
  • 方法
  • 过滤器

基础依赖

  • day.min.js 下载链接
  • 放到 相对路径 js 目录下

Computed

  • 代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>过滤器</title><!--  引入Vue  --><script type="text/javascript" src="../js/vue.js"></script><script type="text/javascript" src="../js/dayjs.min.js"></script><style>.base {padding: 5px;height: 100px;}</style></head><body><div id="root"><h1>过滤器-格式化时间</h1><div><h2>当前时间戳：{{curTime}}</h2><!-- 计算属性 --><h3>计算属性：{{fmtTime}}</h3></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",// curTime: new Date().getTime(),curTime: 1748675500506,},computed: {fmtTime(){console.log(" computed format time ...")return dayjs(this.curTime).format('YYYY-MM-DD HH:mm:ss')}},methods: {},});</script>
</html>
  • 效果

在这里插入图片描述

Methods

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>过滤器</title><!--  引入Vue  --><script type="text/javascript" src="../js/vue.js"></script><script type="text/javascript" src="../js/dayjs.min.js"></script><style>.base {padding: 5px;height: 100px;}</style></head><body><div id="root"><h1>过滤器-格式化时间</h1><div><h2>当前时间戳：{{curTime}}</h2><!-- 计算属性 --><h3>计算属性：{{fmtTime}}</h3><!-- Methods方法 --><h3>Methods方法：{{formatTime()}}</h3></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",// curTime: new Date().getTime(),curTime: 1748675500506,},computed: {fmtTime(){console.log(" computed format time ...")return dayjs(this.curTime).format('YYYY-MM-DD HH:mm:ss')}},methods: {formatTime(){console.log(" methods format time ...")return dayjs(this.curTime).format('YYYY-MM-DD HH:mm:ss')}},});</script>
</html>
  • 效果

在这里插入图片描述

Filters

无参过滤器
  • 代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>过滤器</title><!--  引入Vue  --><script type="text/javascript" src="../js/vue.js"></script><script type="text/javascript" src="../js/dayjs.min.js"></script><style>.base {padding: 5px;height: 100px;}</style></head><body><div id="root"><h1>过滤器-格式化时间</h1><div><h2>当前时间戳：{{curTime}}</h2><!-- 计算属性 --><h3>计算属性：{{fmtTime}}</h3><!-- Methods方法 --><h3>Methods方法：{{formatTime()}}</h3><!-- 过滤器 --><h3>无参过滤器：{{curTime | timeFormater}}</h3></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",// curTime: new Date().getTime(),curTime: 1748675500506,},computed: {fmtTime(){console.log(" computed format time ...")return dayjs(this.curTime).format('YYYY-MM-DD HH:mm:ss')}},methods: {formatTime(){console.log(" methods format time ...")return dayjs(this.curTime).format('YYYY-MM-DD HH:mm:ss')}},filters: {timeFormater(value){console.log(" No args filters format time ...")return dayjs(value).format('YYYY-MM-DD HH:mm:ss')}}});</script>
</html>
  • 效果

在这里插入图片描述

有参过滤器
  • 代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>过滤器</title><!--  引入Vue  --><script type="text/javascript" src="../js/vue.js"></script><script type="text/javascript" src="../js/dayjs.min.js"></script><style>.base {padding: 5px;height: 100px;}</style></head><body><div id="root"><h1>过滤器-格式化时间</h1><div><h2>当前时间戳：{{curTime}}</h2><!-- 计算属性 --><h3>计算属性：{{fmtTime}}</h3><!-- Methods方法 --><h3>Methods方法：{{formatTime()}}</h3><!-- 过滤器 --><h3>无参过滤器：{{curTime | timeFormater}}</h3><h3>有参过滤器：{{curTime | timeFormater('YYYY年MM月DD日 HH时mm分ss秒')}}</h3></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",// curTime: new Date().getTime(),curTime: 1748675500506,},computed: {fmtTime(){console.log(" computed format time ...")return dayjs(this.curTime).format('YYYY-MM-DD HH:mm:ss')}},methods: {formatTime(){console.log(" methods format time ...")return dayjs(this.curTime).format('YYYY-MM-DD HH:mm:ss')}},filters: {timeFormater(value,formatStr='YYYY-MM-DD HH:mm:ss'){console.log(" filters format time ... :" + formatStr)return dayjs(value).format(formatStr)}}});</script>
</html>
  • 效果

在这里插入图片描述

链式过滤器
  • 代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>过滤器</title><!--  引入Vue  --><script type="text/javascript" src="../js/vue.js"></script><script type="text/javascript" src="../js/dayjs.min.js"></script><style>.base {padding: 5px;height: 100px;}</style></head><body><div id="root"><h1>过滤器-格式化时间</h1><div><h2>当前时间戳：{{curTime}}</h2><!-- 计算属性 --><h3>计算属性：{{fmtTime}}</h3><!-- Methods方法 --><h3>Methods方法：{{formatTime()}}</h3><!-- 过滤器 --><h3>无参过滤器：{{curTime | timeFormater}}</h3><h3>有参过滤器：{{curTime | timeFormater('YYYY年MM月DD日 HH时mm分ss秒')}}</h3><h3>链式过滤器：{{curTime | timeFormater('YYYY年MM月DD日 HH时mm分ss秒') | spliceStr}}</h3></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",// curTime: new Date().getTime(),curTime: 1748675500506,},computed: {fmtTime(){console.log(" computed format time ...")return dayjs(this.curTime).format('YYYY-MM-DD HH:mm:ss')}},methods: {formatTime(){console.log(" methods format time ...")return dayjs(this.curTime).format('YYYY-MM-DD HH:mm:ss')}},filters: {timeFormater(value,formatStr='YYYY-MM-DD HH:mm:ss'){console.log(" filters format time ... :" + formatStr)return dayjs(value).format(formatStr)},spliceStr(value){console.log(" filters splice time (年月日)... ")return value.split(" ")[0]}}});</script>
</html>
  • 效果
    在这里插入图片描述
全局过滤器

格式： Vue.filter(‘filterName’,function(value){})
注意：全局过滤器声明必须在Vue实例化之前

  • 代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>过滤器</title><!--  引入Vue  --><script type="text/javascript" src="../js/vue.js"></script><script type="text/javascript" src="../js/dayjs.min.js"></script><style>.base {padding: 5px;height: 100px;}</style></head><body><div id="root"><h1>过滤器-格式化时间</h1><div><h2>当前时间戳：{{curTime}}</h2><!-- 计算属性 --><h3>计算属性：{{fmtTime}}</h3><!-- Methods方法 --><h3>Methods方法：{{formatTime()}}</h3><!-- 过滤器 --><h3>无参过滤器：{{curTime | timeFormater}}</h3><h3>有参过滤器：{{curTime | timeFormater('YYYY年MM月DD日 HH时mm分ss秒')}}</h3><h3>链式过滤器：{{curTime | timeFormater('YYYY年MM月DD日 HH时mm分ss秒') |spliceStr}}</h3><h3>全局过滤器：{{curTime | timeFormater | globalStr}}</h3></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示Vue.filter("globalStr", function (value) {console.log(" global filter splice time (时分秒)... ");return value.split(" ")[1];});const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",// curTime: new Date().getTime(),curTime: 1748675500506,},computed: {fmtTime() {console.log(" computed format time ...");return dayjs(this.curTime).format("YYYY-MM-DD HH:mm:ss");},},methods: {formatTime() {console.log(" methods format time ...");return dayjs(this.curTime).format("YYYY-MM-DD HH:mm:ss");},},filters: {timeFormater(value, formatStr = "YYYY-MM-DD HH:mm:ss") {console.log(" filters format time ... :" + formatStr);return dayjs(value).format(formatStr);},spliceStr(value) {console.log(" filters splice time (年月日)... ");return value.split(" ")[0];},},});</script>
</html>
  • 效果

在这里插入图片描述


http://www.hkcw.cn/article/VlhDYQFdWH.shtml

相关文章

Java 文件操作 和 IO（4）-- Java文件内容操作（2）-- 字符流操作

Java 文件操作 和 IO（4）-- Java文件内容操作（2）-- 字符流操作

Java 文件操作 和 IO&#xff08;4&#xff09;-- Java文件内容操作&#xff08;2&#xff09;-- 字符流操作 文章目录 Java 文件操作 和 IO&#xff08;4&#xff09;-- Java文件内容操作&#xff08;2&#xff09;-- 字符流操作观前提醒&#xff1a;1. Java中操作文件的简单介…
阅读更多...
【Qt】EventFilter，要增加事件拦截器才能拦截到事件

【Qt】EventFilter，要增加事件拦截器才能拦截到事件

在构造函数中增加事件拦截器 void QObject::installEventFilter(QObject *filterObj) Installs an event filter filterObj on this object. For example:
阅读更多...
Cypress + React + TypeScript

Cypress + React + TypeScript

🧪 Cypress + React + TypeScript 组件测试全流程实战：从入门到自动化集成 在现代前端开发中，组件测试 是保障 UI 行为可靠性的重要手段。本文将通过一个 React 项目示例，实战演示如何结合 Cypress + React + TypeScript 实现从零配置到自动化集成的完整测试链路。 一、项…
阅读更多...
cf每日刷题

cf每日刷题

目录 String&#xff08;800&#xff09; Skibidus and Amogu&#xff08;800&#xff09; Apples in Boxes&#xff08;1100&#xff09; String&#xff08;800&#xff09; https://codeforces.com/problemset/problem/2062/A #include <iostream> #include <…
阅读更多...
FPGA纯verilog实现MIPI-DSI视频编码输出，提供工程源码和技术支持

FPGA纯verilog实现MIPI-DSI视频编码输出，提供工程源码和技术支持

目录 1、前言工程概述免责声明 2、相关方案推荐我已有的所有工程源码总目录----方便你快速找到自己喜欢的项目我这里已有的 MIPI 编解码方案 3、设计思路框架工程设计原理框图FPGA内部彩条RGB数据位宽转换RGB数据缓存MIPI-DSI协议层编码MIPI-DPHY物理层串化MIPI-LVDS显示屏工程…
阅读更多...
极智项目 | 多模态大模型推理平台-Streamlit版（支持Qwen2.5/InternVL3/KimiVL三大模型）

极智项目 | 多模态大模型推理平台-Streamlit版（支持Qwen2.5/InternVL3/KimiVL三大模型）

多模态大模型推理测试Web应用 软件下载链接&#xff1a;下载 基于Streamlit的多模态大模型推理测试平台&#xff0c;支持Qwen2.5-VL、InternVL3、Kimi-VL三大模型&#xff0c;提供transformers和vLLM两种推理框架。 软件介绍 核心功能 多模型支持: 集成三大主流多模态大模型…
阅读更多...
mysql慢sql的实际处理方案之一

mysql慢sql的实际处理方案之一

复习mysql架构图 当大批量慢sql过来&#xff0c;显然就是占用了线程池的链接&#xff0c;然后长久不释放&#xff0c;所以会出现线程池满的问题&#xff0c;致使正常业务sql也全部阻塞&#xff0c;影响整个业务。 AI搜索如下&#xff1a; 可以考虑一种方案&#xff1a; 将线…
阅读更多...
最小生成树

最小生成树

1 最小生成树的概论 最小生成树的概念 2 Kruskal算法 首先我们要熟记最小生成树的概念 必须是无向带权图&#xff0c;必须保证连通性&#xff0c;总的权值必须是最小的 如果无向带权图有n个节点&#xff0c;那么最小生成树一定有n-1个边 这个也被叫成k算法&#xff0c;很常用…
阅读更多...
网络系统中安全漏洞扫描为何重要？扫描啥？咋扫描？

网络系统中安全漏洞扫描为何重要？扫描啥？咋扫描？

在网络系统中&#xff0c;安全漏洞扫描占据着极其重要的位置&#xff0c;这一环节有助于我们发现并消除潜在的安全隐患&#xff0c;进而提高网络安全防护的等级。下面&#xff0c;我将对此进行详尽的说明。 基本概念 漏洞扫描技术可以揭示并评估网站存在的安全风险&#xff0…
阅读更多...
2025年- H62-Lc170--34.在排序数组中查找元素的第一个和最后一个位置(2次二分查找，标记向左寻找，标记向右寻找）--Java版

2025年- H62-Lc170--34.在排序数组中查找元素的第一个和最后一个位置(2次二分查找，标记向左寻找，标记向右寻找）--Java版

1.题目描述 2.思路 3.代码实现 public class H34 {public int[] searchRange(int[] nums, int target) {int start findFirst(nums, target);int end findLast(nums, target);return new int[]{start, end};}// 查找第一个出现的位置public int findFirst(int[] nums, int t…
阅读更多...
VR/AR 显示瓶颈将破！铁电液晶技术迎来关键突破

VR/AR 显示瓶颈将破！铁电液晶技术迎来关键突破

在 VR/AR 设备逐渐走进大众生活的今天&#xff0c;显示效果却始终是制约其发展的一大痛点。纱窗效应、画面拖影、眩晕感…… 传统液晶技术的瓶颈让用户体验大打折扣。不过&#xff0c;随着铁电液晶技术的重大突破&#xff0c;这一局面有望得到彻底改变。 一、传统液晶技术瓶颈…
阅读更多...
基于空天地一体化网络的通信系统matlab性能分析

基于空天地一体化网络的通信系统matlab性能分析

目录 1.引言 2.算法仿真效果演示 3.数据集格式或算法参数简介 4.MATLAB核心程序 5.算法涉及理论知识概要 5.1 QPSK调制原理 5.2 空天地一体化网络信道模型 5.3 空天地一体化网络信道特性 6.参考文献 7.完整算法代码文件获得 1.引言 空天地一体化网络是一种将卫星通信…
阅读更多...
基于FashionMnist数据集的自监督学习（生成式自监督学习AE算法）

基于FashionMnist数据集的自监督学习（生成式自监督学习AE算法）

目录 一&#xff0c;生成式自监督学习 1.1 简介 1.2 核心思想 1.3 常见算法 1.3.1 自动编码器&#xff08;Autoencoder&#xff09; 1.3.2 生成对抗网络&#xff08;GANs&#xff09; 1.3.3 变分自编码器&#xff08;VAE&#xff09; 1.3.4 Transformer-based 模型&…
阅读更多...
腾讯位置商业授权关键词输入提示开发指南

腾讯位置商业授权关键词输入提示开发指南

概述 用于获取输入关键字的补完与提示&#xff0c;帮助用户快速输入。本接口为纯HTTP数据接口&#xff0c;需配合前端程序实现Autocomplete&#xff08;自动完成&#xff09;的效果。 请求URL 该请求为GET请求 https://apis.map.qq.com/ws/place/v1/suggestion 请求参数 名称必…
阅读更多...
【愚公系列】《生产线数字化设计与仿真》006-颜色分类站仿真（配置颜色分类站的气缸和传送带）

【愚公系列】《生产线数字化设计与仿真》006-颜色分类站仿真（配置颜色分类站的气缸和传送带）

&#x1f31f;【技术大咖愚公搬代码&#xff1a;全栈专家的成长之路&#xff0c;你关注的宝藏博主在这里&#xff01;】&#x1f31f; &#x1f4e3;开发者圈持续输出高质量干货的"愚公精神"践行者——全网百万开发者都在追更的顶级技术博主&#xff01; &#x1f…
阅读更多...
企业内训｜客户智能营销实战——某头部车企

企业内训｜客户智能营销实战——某头部车企

5月下旬&#xff0c;TsingtaoAI团队为某央企汽车厂商的智能驾驶业务运营团队交付“客户智能营销实战”课程。 本课程聚焦AI技术与汽车营销的深度融合&#xff0c;以“数据驱动大模型赋能”为核心&#xff0c;系统拆解智能营销全链路。课程从行业痛点切入&#xff0c;结合最新趋…
阅读更多...
Mybatis-Plus简单介绍

Mybatis-Plus简单介绍

前一篇文章中&#xff0c;小编介绍到了Mybatis&#xff0c;以及它的增强工具&#xff0c;mybatis-generator。 那么为了再减少对于SQL语句的编写&#xff0c;那么mybatis的另一个增强工具也是做出了巨大努力。 Mybaits-Plus Mybatis-Plus简称MP&#xff0c;它是一个Mybatis的…
阅读更多...
LLm中 float16和 float32 区别，为什么训练不能采用float16--梯度消失

LLm中 float16和 float32 区别，为什么训练不能采用float16--梯度消失

LLm中 float16和 float32 区别，为什么训练不能采用float16–梯度消失 在深度学习中，使用 float16（半精度）而非 float32（单精度）进行训练时，数值范围和精度的差异可能导致一系列问题，特别是当损失值达到 0.0001 这种较小时。以下是具体分析： 1. float16 与 float32 的…
阅读更多...
Vue2之2组件通信

Vue2之2组件通信

文章目录 什么是组件通信不同的组件关系 和 组件通信方案分类组件关系分类&#xff1a;组件通信方案分类 父子通信流程图&#xff1a;父传子子传父非父子通信 (拓展) - event bus 事件总线非父子通信 (拓展) - provide & inject 深入学习prop属性prop接收多个值props 是只读…
阅读更多...
Qt -下载Qt6与OpenCV

Qt -下载Qt6与OpenCV

博客主页&#xff1a;【夜泉_ly】 本文专栏&#xff1a;【暂无】 欢迎点赞&#x1f44d;收藏⭐关注❤️ 前言 呃啊&#xff0c;本来就想在 Qt 里简单几个 OpenVC 的函数&#xff0c;没想到一搞就是一天。 我之前的开发环境是 Qt 5.14.2&#xff0c;使用 MinGW 7.3.0 64-bit 编…
阅读更多...
推荐文章

Copyright @ 2022~2023