vue中插值表达式中时间转换yyyy-MM-dd HH:mm:ss
2024-09-03 18:49:52
vue插值表达式中将时间转换两种方式:
一、定义方法
<div id="app">当前实时时间:{{dateFormat(date)}}</div>
//时间格式化函数,此处仅针对yyyy-MM-dd hh:mm:ss 的格式进行格式化
dateFormat(time) {
var date=new Date(time);
var year=date.getFullYear();
/* 在日期格式中,月份是从0开始的,因此要加0
* 使用三元表达式在小于10的前面加0,以达到格式统一 如 09:11:05
* */
var month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1;
var day=date.getDate()<10 ? "0"+date.getDate() : date.getDate();
var hours=date.getHours()<10 ? "0"+date.getHours() : date.getHours();
var minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes();
var seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds();
// 拼接
return year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds;
}
二、定义过滤器
- 引入moment依赖
npm install moment --save
- main.js中全局引用并定义过滤器
import moment from 'moment'
//全局过滤器
Vue.filter('dateFmt', (input, formatString = "YYYY-MM-DD") => {
return moment(input).format(formatString)
}) - 组件插值表达式中使用
<div id="app">当前实时时间:{{date|dateFmt('YYYY-MM-DD HH:mm:ss')}}</div>
最新文章
- 【AR实验室】ARToolKit之Example篇
- MySql access denied for user错误
- ASP.NET MVC获取微信返回的json数据分页
- 讲讲js中的逻辑与(&;&;)以及逻辑或(||)
- MFC 打开文件夹选择框并获取文件夹路径
- 随时修改添加,thinkphp小知识
- 1Web语言:开始了解HTML
- 5、JavaScript进阶篇②——函数、事件、内置对象
- NetCDF 格式化数据概述
- 博客导出工具(C++实现,支持sina,csdn,自定义列表)
- Linux下通过JDBC连接Oracle,SqlServer和PostgreSQL
- 李洪强iOS开发本人集成环信的经验总结_03_注册
- nyoj 16 矩形嵌套
- 转自作者:phylips@bmy
- bzoj1236
- sql 根据时间获取数据
- UILabel自适应高度,自动换行
- Oracle SQL Lesson (2) - 限制和排序数据
- API Gateway性能比较:NGINX vs. ZUUL vs.Cloud Gateway vs. Linkerd[译]
- PAT L3-020 至多删三个字符