Vue-过滤器

过滤器

时间戳格式化

实现方式

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

基础依赖

  • 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.pswp.cn/diannao/85186.shtml

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

相关文章

Linux 下 C 语言实现工厂模式

Linux 下 C 语言实现工厂模式

Linux 下 C 语言实现工厂模式&#xff1a;设计理念与实战 &#x1f9e0; 一、工厂模式简介什么是工厂模式&#xff1f;C 语言实现设计模式的挑战 &#x1f3d7;️ 二、实现简单工厂模式&#xff08;Simple Factory&#xff09;1. 定义传感器接口&#xff08;device.h&#xff0…
阅读更多...
用 Appuploader，让 iOS 上架流程真正“可交接、可记录、可复用”：我们是这样实现的

用 Appuploader，让 iOS 上架流程真正“可交接、可记录、可复用”：我们是这样实现的

你可能听说过这样一类人&#xff1a;上线必找他&#xff0c;证书只有他有&#xff0c;Transporter 密码在他电脑上&#xff0c;描述文件什么时候过期&#xff0c;只有他知道。 如果你团队里有这样一位“发布大师”&#xff0c;他可能是个英雄——但也是个单点风险源。 我们团…
阅读更多...
工控机安装lubuntu系统

工控机安装lubuntu系统

工控机安装lubuntu系统指南手册 1. 准备 1个8G左右的U盘 下载Rufus&#xff1a; Index of /downloads 下载lubuntu系统镜像&#xff1a; NJU Mirror Downloads – Lubuntu 下载Ventoy工具&#xff1a; Releases ventoy/Ventoy GitHub 下载后&#xff0c;解压&#…
阅读更多...
MAC上怎么进入隐藏目录

MAC上怎么进入隐藏目录

在Mac上&#xff0c;由于系统保护的原因&#xff0c;一些系统目录如/usr默认是隐藏的&#xff0c;但可以通过以下方法进入&#xff1a; 方法一&#xff1a;使用Finder的“前往文件夹”功能 打开Finder。使用快捷键Command Shift G&#xff0c;或者在菜单栏中选择“前往”-“…
阅读更多...
流媒体基础解析：视频清晰度的关键因素

流媒体基础解析：视频清晰度的关键因素

在视频处理的过程中&#xff0c;编码解码及码率是影响视频清晰度的关键因素。今天&#xff0c;我们将深入探讨这些概念&#xff0c;并解析它们如何共同作用于视频质量。 编码解码概述 编码&#xff0c;简单来说&#xff0c;就是压缩。视频编码的目的是将原始视频数据压缩成较…
阅读更多...
tomcat服务器以及接受请求参数的方式

tomcat服务器以及接受请求参数的方式

1.javaee&#xff1a;意为java企业版&#xff0c;指java企业级开发的规范总和&#xff0c;包含13项技术规范 2.事实上服务器和客户端进行交互的过程中&#xff0c;有一个前端控制器在中间运作&#xff0c;这个控制器为DispatcherServlet&#xff0c;它负责将客户端请求的信息包…
阅读更多...
武警智能兵器室系统架构设计与关键技术解析

武警智能兵器室系统架构设计与关键技术解析

在现代化武警部队建设中&#xff0c;武器弹药的安全管理与快速响应能力直接影响部队战斗力。本文基于某实战化智能兵器室建设案例&#xff0c;深入解析其系统架构设计、关键技术实现及创新管理机制&#xff0c;为安防领域提供可借鉴的解决方案。 整体拓扑结构 系统采用分层分布…
阅读更多...
RLHF奖励模型的训练

RLHF奖励模型的训练

由于 RLHF 的训练过程中需要依赖大量的人类偏好数据进行学习&#xff0c;因此很难在训练过程中要求人类标注者实时提供偏好反馈。为此&#xff0c;我们需要训练一个模型来替代人类在 RLHF 训练过程中实时提供反馈&#xff0c;这个模型被称为奖励模型 &#x1f538;一、 目标函…
阅读更多...
reverse_ssh 建立反向 SSH 连接指南 混淆AV [好东西哟]

reverse_ssh 建立反向 SSH 连接指南 混淆AV [好东西哟]

目录 &#x1f310; 工具简介 ⚙️ 前提条件 攻击主机 (Linux) 目标主机 (Windows) &#x1f4cb; 详细步骤 步骤 1&#xff1a;安装 Go 环境 步骤 2&#xff1a;安装必要依赖 步骤 3&#xff1a;下载并编译 reverse_ssh 步骤 4&#xff1a;配置密钥 步骤 5&#xff…
阅读更多...
Ubuntu 下搭建ESP32 ESP-IDF开发环境，并在windows下用VSCode通过SSH登录Ubuntu开发ESP32应用

Ubuntu 下搭建ESP32 ESP-IDF开发环境，并在windows下用VSCode通过SSH登录Ubuntu开发ESP32应用

Ubuntu 下搭建ESP32 ESP-IDF开发环境&#xff0c;网上操作指南很多&#xff0c;本来一直也没有想过要写这么一篇文章。因为我其实不太习惯在linux下开发应用&#xff0c;平时更习惯windows的软件操作&#xff0c;只是因为windows下开发ESP32的应用编译时太慢&#xff0c;让人受…
阅读更多...
Rust使用Cargo构建项目

Rust使用Cargo构建项目

文章目录 你好&#xff0c;Cargo&#xff01;验证Cargo安装使用Cargo创建项目新建项目配置文件解析默认代码结构 Cargo工作流常用命令速查表详细使用说明1. 编译项目2. 运行程序3.快速检查4. 发布版本构建 Cargo的设计哲学约定优于配置工程化优势 开发建议1. 新项目初始化​2. …
阅读更多...
免费且好用的PDF水印添加工具

免费且好用的PDF水印添加工具

软件介绍 琥珀扫描.zip下载链接&#xff1a;https://pan.quark.cn/s/3a8f432b29aa 今天要给大家推荐一款超实用的PDF添加水印工具&#xff0c;它能够满足用户给PDF文件添加水印的需求&#xff0c;而且完全免费。 这款PDF添加水印的软件有着简洁的界面&#xff0c;操作简便&a…
阅读更多...
NW969NW978美光闪存颗粒NW980NW984

NW969NW978美光闪存颗粒NW980NW984

NW969NW978美光闪存颗粒NW980NW984 技术解析&#xff1a;NW969、NW978、NW980与NW984的架构创新 美光&#xff08;Micron&#xff09;的闪存颗粒系列&#xff0c;尤其是NW969、NW978、NW980和NW984&#xff0c;代表了存储技术的前沿突破。这些产品均采用第九代3D TLC&#xf…
阅读更多...
Mysql常用知识3：Kafka和数据库优化

Mysql常用知识3：Kafka和数据库优化

文章目录 一、分布式消息系统&#xff08;Kafka相关问题5-10&#xff09;5. Kafka如何保证消息不丢失&#xff1f;6. 项目中Kafka具体怎么使用的&#xff1f;7. 消息异常未发送成功怎么解决&#xff1f;8. 重试具体怎么做的&#xff0c;循环吗&#xff1f;9. 重试多次失败怎么办…
阅读更多...
常见的RAG文档解析辅助工具汇总及企业选型思考

常见的RAG文档解析辅助工具汇总及企业选型思考

以下当前比较知名的RAG的文档解析辅助工具的开源项目汇总&#xff0c;包含核心功能、License信息及GitHub地址&#xff1a; 1. RAGFlow 核心功能&#xff1a;支持PDF/扫描件/CAD等23种格式解析&#xff0c;OCR准确率98%&#xff0c;知识图谱融合&#xff0c;混合检索&#xf…
阅读更多...
基于Sqoop的MySQL-Hive全量/增量同步解决方案（支持多表批量处理

基于Sqoop的MySQL-Hive全量/增量同步解决方案（支持多表批量处理

一、全量同步方案设计 1.1 基础命令模板 sqoop import \ --connect jdbc:mysql://mysql_host:3306/db_name \ --username user \ --password pass \ --table source_table \ --hive-import \ --hive-table target_table \ --hive-overwrite \ # 覆盖已有表 --num-mappers 8 …
阅读更多...
前端学习（7）—— HTML + CSS实现博客系统页面

前端学习（7）—— HTML + CSS实现博客系统页面

目录 一&#xff0c;效果展示 二&#xff0c;实现博客列表页 2.1 实现导航栏 2.2 实现个人信息 2.3 实现博客列表 三&#xff0c;实现博客正文页 3.2 复用 3.4 实现博客正文 四&#xff0c;实现博客登录页 4.1 版心 4.2 登录框 五&#xff0c;实现博客编辑页 5.1 …
阅读更多...
【技能拾遗】——家庭宽带单线复用布线与配置（移动2025版）

【技能拾遗】——家庭宽带单线复用布线与配置（移动2025版）

&#x1f4d6; 前言&#xff1a;在家庭网络拓扑中&#xff0c;客厅到弱电箱只预埋了一根网线&#xff0c;由于已将广电的有线电视取消并改用IPTV。现在需要解决在客厅布置路由器和观看IPTV问题&#xff0c;这里就用到单线复用技术。 目录 &#x1f552; 1. 拓扑规划&#x1f55…
阅读更多...
VTK|实现类似CloundCompare的测量功能

VTK|实现类似CloundCompare的测量功能

文章目录 CloundCompare在点、线、面三种模式下的显示内容✅ 图1&#xff1a;点模式✅ 图2&#xff1a;线模式✅ 图3&#xff1a;面模式 增加控制菜单栏实现测量功能类如何调用项目git链接 CloundCompare在点、线、面三种模式下的显示内容 点 线 面 三张图展示了 CloudComp…
阅读更多...
4000万日订单背后，饿了么再掀即时零售的“效率革命”

4000万日订单背后，饿了么再掀即时零售的“效率革命”

当即时零售转向价值深耕&#xff0c;赢面就是综合实力的强弱。 文&#xff5c;郭梦仪 编&#xff5c;王一粟 在硝烟弥漫的外卖行业“三国杀”中&#xff0c;饿了么与淘宝闪购的日订单量竟然突破了4000万单。 而距淘宝闪购正式上线&#xff0c;还不到一个月。 在大额福利优惠…
阅读更多...
最新文章

Copyright @ 2022~2023