Vue中时间日期格式化

封装格式化时间方法
创建一个js文件formatDate.js,内容如下:

//方法一
export function formatDate(val) {var date = new Date(Number(val)); //时间戳为10位需*1000,时间戳为13位的话不需乘1000var Y = date.getFullYear() + "-";var M = (date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1) + "-";var D = date.getDate() + " ";var h = date.getHours() + ":";var m = date.getMinutes() + ":";var s = (date.getSeconds() < 10 ? "0" + (date.getSeconds()) : date.getSeconds());return Y + M + D + h + m + s;
}//方法二
export function formatDates(date, fmt) {if (/(y+)/.test(fmt)) {fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));}let o = {'M+': date.getMonth() + 1,'d+': date.getDate(),'h+': date.getHours(),'m+': date.getMinutes(),'s+': date.getSeconds()};for (let k in o) {if (new RegExp(`(${k})`).test(fmt)) {let str = o[k] + '';fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str));}}return fmt;
};function padLeftZero(str) {return ('00' + str).substr(str.length);
}

使用

 import {formatDate,formatDates} from '@/utils/formatDate'export default {data() {return {newsList: [],time: "1581672605401"}},created () {this.getNewsList()},filters: {//方法一fmtime(val) {return formatDate(val);},//使用封装中的方法二formatTime(val){let data=new Date(val)return  formatDates(data,'yyyy-MM-dd hh:mm');}},methods: { },},}
  <div v-for="d in newsList" :key="d.id"><div>{{time | fmtime}}</div><span>{{d.createdDate | formatTime}}</span></div>

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

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

相关文章

分布式应用,response导出error on submit request on future invoke、java.lang.OutOfMemoryError: Java heap space

背景 HSF 分布式框架 &#xff0c;基于EasyExcel 实现excel导出 。 控制层&#xff0c; GET请求 &#xff0c; 传递 HttpServletRequest 和 HttpServletRespose 到&#xff0c;业务中台时&#xff0c;异常 原因 分布式应用下&#xff0c;控制层传递response到中台时&#xf…

阿里云混合云管理平台发布帮您管好云

6月9日&#xff0c; 在2020阿里云线上峰会上阿里云混合云战略正式发布&#xff1a;全栈建云、智能管云、极致用云。同步发布专有云敏捷版&#xff08;Apsara Stack Agility&#xff09;、 混合云管理平台&#xff08;Apsara Uni-manager&#xff09;以及下一代企业级一站式DevO…

ApiPost6/Postman发送POST请求及日期格式的参数

Postman在发送POST请求的时候&#xff0c;所有参数写在Request Body&#xff08;请求体&#xff09;中&#xff0c;如果需要的参数类型的日期格式的&#xff0c;只需要将日期格式写为2000/01/01即可&#xff0c;Postman会自动识别为日期格式的数据。 如果是2000-01-01格式&…

Mendix入局中国低代码,开发者们你准备好了吗

作者 | 宋慧 出品 | CSDN云计算 头图 | 付费下载于视觉中国 在企业级软件与技术领域鼎鼎大名的Gartner魔力象限&#xff0c;几乎是全球公认的IT厂商实力的重要背书&#xff0c;进入魔力象限右上部分的领导者&#xff08;leaders&#xff09;更是能力全面的最优质厂商。 2021年…

OpenYurt开箱测评|一键让原生K8s集群具备边缘计算能力

作者| 郑超 阿里云高级开发工程师 随着物联网技术以及 5G 技术的高速发展&#xff0c;将云计算的能力延伸至边缘设备端&#xff0c;并通过中心进行统一交付、管控&#xff0c;已成为云计算的重要发展趋势。为服务更多开发者把握这一趋势&#xff0c;5 月 29 日&#xff0c;阿里…

系统架构设计师 - 主观题总结

文章目录2015软件架构评估系统建模嵌入式可靠性文件系统、关系型数据库、内存型数据库WEB应用持久层设计2017软件架构评估软件系统架构设计流行技术数据库访问层WEB系统架构设计2015 软件架构评估 质量属性效用树&#xff1a; 软件架构风险&#xff1a; 敏感点&#xff1a; 权…

pagehelper版本升级导致pageSize为0时无法查询全部数据

前言 pageSize为0无效,修改配置 springboot版本升级后&#xff0c;pagehelper插件由1.2.3版本升级到1.4.1版本&#xff1b;发现升级之后pageSize为0时无法查询全部数据 maven依赖引入 旧版本pom.xml配置1.2.3 <dependency><groupId>com.github.pagehelper</g…

技术运维的经营大法——对话阿里云MVP熊昌伟

云栖号资讯&#xff1a;【点击查看更多行业资讯】 在这里您可以找到不同行业的第一手的上云资讯&#xff0c;还在等什么&#xff0c;快来&#xff01; 简介&#xff1a; 不同于其他技术人的进阶经历&#xff0c;熊昌伟毕业后从未跳槽&#xff0c;在用友网络潜心修炼14年至今。从…

我同事狠心用 Python 3 ,刚开始就直接崩溃!你们试试......

Python 近两年一直霸占编程语言排行榜 Top3&#xff0c;火热程度有目共睹。这也让刚入行的程序员&#xff0c;甚至 BATJ 的技术大牛&#xff0c;都意识到 Python 对于一个程序员职业发展的重要性&#xff0c;将其作为第一/第二开发语言去学习。我同事前些日子说要学Python&…

阿里宜搭助力服务中枢升级,提升10倍开发效率

“真没想到&#xff0c;我在小程序上申请了‘要一双拖鞋’&#xff0c;不到半分钟功夫&#xff0c;机器人就把拖鞋送来了&#xff01;”住在菲住布渴的王女士感叹到。在酒店管理和服务能力的建设中&#xff0c;菲住布渴始终致力于通过数字化、智能化手段&#xff0c;让每一位入…

系统架构设计师 - 第三方认证服务

文章目录1.基于非对称密钥体系的 KPI/CA2.基于对称密钥体系的 Kerberos1.基于非对称密钥体系的 KPI/CA PKI&#xff1a;公钥基础设施 CA&#xff1a;认证中心 加密相关&#xff08;对称加密、非对称加密、信息摘要、数字签名、CA数字证书&#xff09; 2.基于对称密钥体系的 K…

MyBatisplus分页插件

文章目录一、后台分页配置1. 配置分页插件2. 编写分页代码3. 测试二、自定义查询2.1. 自定义接口2.2. 自定义查询2.3. 测试自定义分页一、后台分页配置 MyBatis Plus自带分页插件&#xff08;即BaseMapper接口中的selectPage()方法&#xff09;&#xff0c;只要简单的配置即可…

一个半月快速、低成本上云,云数据库专属集群解决方案看过来

在6月9日的“全速重构”2020阿里云线上峰会&#xff08;点击可查看数据库专场亮点&#xff09;中&#xff0c;阿里云智能数据库事业部的资深产品专家斗佛开启了全球首发4款云数据库新产品——云数据库专属集群、图数据库GDB、云数据库Cassandra版、云数据库ClickHouse。今天小编…

以容器为代表的云原生技术,正成为释放云价值最短路径

作者 | 丁宇&#xff08;叔同&#xff09; 阿里云智能容器平台负责人 云计算、大数据、人工智能等新技术正迅速的改变着我们所处的时代&#xff0c;其巨大的影响力已经从量变到质变&#xff0c;数字化转型成为企业发展的必然选择。 据IDC报告&#xff0c;全球前1000的大企业中…

搭载敏捷飞天底座,阿里云专有云敏捷版全面升级

6月9日&#xff0c; 在2020阿里云线上峰会上阿里云混合云重磅发布三款新品&#xff1a;专有云敏捷版&#xff08;Apsara Stack Agility&#xff09;、 混合云管理平台&#xff08;Apsara Uni-manager&#xff09;以及下一代企业级一站式DevOps平台“云效”。阿里云智能资深技术…

云·越2021 | 移动云开发者社区网站焕新升级

云上磨一剑&#xff0c;砥砺自生辉移动云开发者社区挥手2020&#xff0c;焕新2021迎来社区功能全新升级现已正式上线移动云开发者社区自2020年11月对外发布以来&#xff0c;依托移动云全面的云能力、丰富的产品体系、专业领域能力培训认证、优质双创服务体系等核心资源&#xf…

系统架构设计师 - 软件架构设计 - 软件架构风格

文章目录软件架构风格描述数据流风格批处理风格管道过滤器风格调用返回风格主子程序风格面向对象&#xff08;显式调用风格&#xff09;层次结构风格独立构件风格调用返回风格(隐式调用)虚拟机风格基于规则风格解释器风格仓库风格数据库风格黑板系统浏览器风格两层CS架构三层CS…

如何开启redis5的远程访问权限

如何开启redis的远程访问权限   本地客户端或者程序要连接服务器上面的redis的时候&#xff0c;可能出现连接不上&#xff0c;因为redis默认只允许本机访问。需要修改redis目录下面的redis.conf文件。   1、将bind 127.0.0.1 注释掉&#xff1a;#bind 127.0.0.1   默认只…

阿里巴巴HRSSC:用宜搭实现业务管理模式创新

快速上线全球100支工单流程&#xff0c;为员工提供千人千面的HR自助服务……借助阿里巴巴旗下低代码应用搭建平台“宜搭”&#xff0c;仅仅历时3个月&#xff0c;阿里巴巴HR共享服务中心全新上线&#xff0c;标志着全面服务阿里巴巴生态化、全球化的HR共享服务平台诞生了。 作…