VUE项目中的全局格式化时间过滤器

2023-10-30

1. 全局过滤器

https://blog.csdn.net/weixin_45054614/article/details/105368776

 

// ----全局时间格式化
//对名称进行定义,提供一个function函数   originVal  为形参
Vue.filter('dateFormat', function(originVal) {
    const dt = new Date(originVal)
        //年的时间	
    const y = dt.getFullYear()
        //月的时间  .padStart 不足两位自动补0  2位长度
    const m = (dt.getMonth() + 1 + '').padStart(2, '0')
        //日的时间
    const d = (dt.getDate() + '').padStart(2, '0')
        //小时
    const hh = (dt.getHours() + '').padStart(2, '0')
        //分钟
    const mm = (dt.getMinutes() + '').padStart(2, '0')
        //秒数
    const ss = (dt.getSeconds() + '').padStart(2, '0')
        //将它们拼接成完整的字符串
        //return 'yyyy-mm-dd hh:mm:ss'  可以改成下面的方法
    return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
})

2. 全局方法实现

 

 

3. 单个页面格式化

单个页面:

    //方法区
    formatDate(row, column) {
      // 获取单元格数据
      let data = row[column.property];
      if (data == null) {
        return null;
      }
      let dt = new Date(data);
      return (
        dt.getFullYear() +
        "-" +
        (dt.getMonth() + 1) +
        "-" +
        dt.getDate() +
        " " +
        dt.getHours() +
        ":" +
        dt.getMinutes() +
        ":" +
        dt.getSeconds()
      );
    },

 

 

 

 

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

VUE项目中的全局格式化时间过滤器 的相关文章

  • android历史记录的搜索页

    保存搜索记录 public void saveSearchHistory String inputText SharedPreferences sp WDApplication getContext getSharedPreferences
  • DoubleCheck验证(双重检查锁和延迟初始化)

    场景 二话不说 直接上代码 public class DoubleCheckDemo private static DoubleCheckDemo demo public DoubleCheckDemo getDemo if demo nu
  • 架构师成长之路|Redis 安装介绍以及内存分配器jemalloc

    安装 Redis官网 https redis io download 下载安装二进制文件 可下载安装最新版Redis7 2 0 或者可选版本6 x 我这里下载6 2 13和7 2最新版本 后面我们都是安装6 2 13版本的信息进行讲解 二进
  • gitlab用法教程

    目录 上传文件 1 对待git上新建空文件夹的方式 2 如果git上已有文件夹 一些常见问题 上传文件 1 对待git上新建空文件夹的方式 右击待上传文件夹名字 选择 git bash here 然后依次输入如下命令 git init 当前
  • 软件工程-白盒测试

    1 写出MaCabe方法计算程序环形复杂度的三种方法 V G 流图中的区域数 V G E N 2 其中E是流图中的边数 N是结点数 V G P 1 其中P是流图中判定结点的数目 2 什么是白盒测试 白盒测试又称结构测试 透明盒测试 逻辑驱动
  • libtorch torch::from_blob踩坑

    libtorch中 torch from blob函数 可以把外部内存创建一个tensor 这里给个简单错误示例 torch Tensor example std vector
  • 电容实际等效模型(容抗、感抗、品质因数Q)

    来自 https blog csdn net Albert992 article details 104346051
  • 腾讯音乐第三道编程题

    2023 4 13号的第三道编程笔试题 题目描述 给一个数字n 构成n n 1 2大小的数组 包含1个1 2个2 n个n 最后输出的数组相邻的两个数字不相同 输出的数组可能不唯一 例如 输入 4 输出 4 3 4 3 4 3 4 2 1 2
  • 【项目实战】C语言+easyX带你实现:找方块

    每天一个编程小项目 提升你的编程能力 程序介绍 该程序是仿照最近网上的找方块游戏编写的 虽然没有仿照的一模一样 但是也实现了他的一些功能 个人觉得可玩性还是挺高的 是一个不错的娱乐放松的游戏 编写简介 该游戏的编写还是挺容易的 可以大致分为
  • echarts 柱状图颜色设置

    作者 船长在船上 主页 来访地址船长在船上的博客 简介 高级前端开发工程师 专注前端开发 欢迎咨询交流 共同学习 感谢 如果觉得博主的文章不错或者对你的工作有帮助或者解决了你的问题 可以关注 支持一下博主 如果三连收藏支持就会更好 在这里博
  • 初识C语言函数(一)

    1 函数是什么 在计算机科学中 子程序 英语 Subroutine procedure function routine method subprogram callable unit 是一个大型程序中的某部分代码 由一个或多个语句块组成
  • a+b 的简单问题

    a b problem 添加链接描述 include
  • React Hooks学习--useReducer,useMemo和useRef

    一 useReducer function ReducerDemo const count dispatch useReducer state action gt switch action case add return state 1
  • H5 缓存机制浅析 - 移动端 Web 加载性能优化

    腾讯 Bugly 特约作者 贺辉超 1 H5 缓存机制介绍 H5 即 HTML5 是新一代的 HTML 标准 加入很多新的特性 离线存储 也可称为缓存机制 是其中一个非常重要的特性 H5 引入的离线存储 这意味着 web 应用可进行缓存 并
  • U盘产生快捷方式病毒

    u盘不小心染了病毒 文件都变成了快捷方式 真实的源文件都变成了隐藏文件 看着这么多快捷方式真是不开心 这个病毒的机制也很简单 它在u盘里放了一个survival vbe文件 就感染了u盘 然后在电脑的c盘放两个survival vbe文件
  • SSH使用篇:Windows登录Ubuntu虚拟机&设置免密登录

    目录 一 ssh的安装与启动 1 安装 2 启动服务器的SSH服务 二 口令登录 1 登录命令 2 验证过程 3 登录失败 1 服务器变更 2 服务器IP变化 三 免密登录 公钥登录 大致的三步 0 准备工作 不一定要弄 1 客户端生成公私
  • 【java】获取属性名工具

    背景 在编码时经常会用到同名的属性名字符串 比如 用相同的属性名做为 map 中的键 在 mybatis 中 根据属性名的下划线字符串来拼接 sql 查询条件 需要修改属性名时 如果是用字符串硬编码的 引用的地方越多 修改越困难 但是如果用
  • 某团面试题:JVM 堆内存溢出后,其他线程是否可继续工作?

    转载注明 http dwz win gHc最近网上出现一个美团面试题 一个线程OOM后 其他线程还能运行吗 我看网上出现了很多不靠谱的答案 这道题其实很有难度 涉及的知识点有jvm内存分配 作用域 gc等 不是简单的是与否的问题 由于题目中
  • 向日葵远程控制端 for Mac

    向日葵远程控制端 for Mac是Mac平台上一款免费的远程桌面控制软件 向日葵远程控制软件免费版支持Mac OS X 10 10 3以上系统 相比客户端的向日葵远程软件 这款控制端功能更加齐全 向日葵客户端仅支持远程桌面 而向日葵控制端则
  • 虚拟主机也是虚拟服务器,虚拟主机和云主机之间的区别是什么

    其实在云计算不断发展的今天 虚拟主机和云主机之间的竞争 也越来越强烈了 此时不少人问虚拟主机和云主机之间的区别是什么 小编表示目前云主机在市场的应用中的优势越来越明显了 很多个人站长和企业们 也都是会使用云主机 因此大家就不妨看看虚拟主机和

随机推荐

  • MIPI CSI接口调试方法: data rate计算

    mipi DPHY 的规格书里对 data rate 有定义上下限值 最低 data rate为 80M bps 最高为 2500M bps 由于mipi 传输时是双采样 这样的话 实际的差分时钟的上下限就是 40MHz 1250 MHz
  • mac 安装adb工具

    1 安装homebrew 在终端输入下面的命令 ruby e curl fsSL https raw githubusercontent com Homebrew install master install 2 安装adb brew in
  • conda install & pip install区别 & 查看当前环境下包的情况

    conda可以方便开发管理python环境 包可以conda 安装有时使用pip整理一下不同点 conda 创建环境 conda create name a conda env python 3 6 名为a conda env python
  • SVG图标配置

    在开发项目的时候我们经常会用到svg矢量图 而且我们使用SVG以后 页面上加载的不再是图片资源 这对页面性能来说也是个很大的提升 项目背景 vue3 vite ts 安装依赖 npm install vite plugin svg icon
  • 202320读书笔记|《宋词》——竹杖芒鞋轻胜马,谁怕?一蓑烟雨任平生

    202320读书笔记 宋词 竹杖芒鞋轻胜马 谁怕 一蓑烟雨任平生 宋词 韩震主编 偶然从书友那加入书架的书 宋词挺喜欢李清照的词以及知否的 菩萨蛮 诗集 词 俳句 短歌我都很喜欢 是轻松有趣又简短的 这本书里有一些是上学时候背过的 看到的时
  • log4j2 入门学习与总结

    log4j2 2 3 入门学习与总结 大纲 log4j2 配置文件加载 log4j2 配置文件结构图 log4j2 配置文件说明 log4j2 Appenders child Filter ThresholdFilter 的使用 log4j
  • 【云原生之K8S】Yaml文件详解

    目录 一 K8S支持的文件格式 1 1 yaml和json的主要区别 二 YAML 2 1 查看API资源版本标签 2 2 编写资源配置清单 编写nginx test yaml资源配置清单 创建资源对象 查看创建的pod资源 2 3 创建s
  • C++中的适配器

    C primer中关于适配器的定义 适配器 adaptor 是使一种事物的行为类似于另外一事物的行为的一种机制 这个定义初学时觉得好抽象 为了理解C 中的适配器 不妨先了解物理上的适配器 物理上的适配器就是一个接口转换器 它可以是一个独立的
  • 我如何搞懂Javascript系列之原型和原型链

    理解原型 JavaScript 常被描述为一种基于原型的语言 每个对象拥有一个原型对象 对象以其原型为模板 从原型继承方法和属性 原型对象也可能拥有原型 并从中继承方法和属性 一层一层 以此类推 这种关系常被称为原型链 构造函数创建对象 J
  • JS常用方法

    1 删除数组中指定对象指定元素 let arr name xiaowang id 1 name xiaozhang id 2 createDate xiaoli id 3 删除id为1的对象 其中i为index 1可选择性填写 含义为删除当
  • 传递颜色

    由于颜色在片元着色器中 故不能用attribute 用uniform得到并传递 11
  • python中国古代数学问题——二鼠打洞

    任务描述 九章算术 的 盈不足篇 里有一个很有意思的老鼠打洞问题 原文是这么说的 今有垣厚十尺 两鼠对穿 大鼠日一尺 小鼠亦一尺 大鼠日自倍 小鼠日自半 问 何日相逢 各穿几何
  • 剑指 Offer 10- I. 斐波那契数列(java+python)

    写一个函数 输入 n 求斐波那契 Fibonacci 数列的第 n 项 即 F N 斐波那契数列的定义如下 F 0 0 F 1 1 F N F N 1 F N 2 其中 N gt 1 斐波那契数列由 0 和 1 开始 之后的斐波那契数就是由
  • C/C++语言 从日期格式字符串中提取年月日时分秒

    系列文章目录 文章目录 系列文章目录 前言 一 日期格式字符串 二 strftime函数 1 描述 2 声明 3 形参 4 返回值 三 strptime函数 1 形参 2 示例 3 函数封装 总结 前言 上一篇文章 C C 语言 获取系统时
  • MES管理系统如何帮助制造企业打造透明化工厂

    在制造型企业的运营中 车间现场管理至关重要 然而 面临着信息传递速度慢 跨部门协作困难 生产进度无法及时掌握 制造品质不良 设备故障不能及时处理等困境 企业需要寻求有效的解决方案 MES生产管理系统作为针对制造企业车间生产过程控制和管理的解
  • 如何在使用中文输入法的时候打出英文字符

    解决方法很简单 只需要按CTRL 就可以实现中英文字符切换 这样在按字母的时候还是会显示拼音 但输入字符时都是英文字符了 避免了频繁的shift切换
  • 【Qt学习】07:绘图与绘图设备

    OVERVIEW 绘图与绘图设备 一 QPainter 二 QPainterDevice 1 QPixmap 2 QBitmap 3 QImage 4 QPicture 绘图与绘图设备 一 QPainter Qt 的绘图系统允许使用API在
  • unsigned int用法

    注意使用unsigned int 无符号常数 正如我们所知道的 编程语句都有很多的基本数据类型 如char inf float等等 而在C和C 中还有一个特殊的类型就是无符号数 它由unsigned修饰 如unsigned int等 大家有
  • visible.sync 的作用

    我们在前端开发中经常看到 visible sync这种修饰符 很多人不知道这是干什么的 特别是在使用ElementUI的时候 里面有个弹窗el dialog组件的时候会有用到 visible sync
  • VUE项目中的全局格式化时间过滤器

    1 全局过滤器 https blog csdn net weixin 45054614 article details 105368776 全局时间格式化 对名称进行定义 提供一个function函数 originVal 为形参 Vue f