文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vue使用moment如何将时间戳转为标准日期时间格式

2023-05-20 05:41

关注

使用moment将时间戳转为标准日期时间格式

vue网页中显示数据库中datetime类型数据时,没有显示为年-月-日 时:分:秒的标准格式,而是显示为时间戳,与我们的要求不一致。

我们需要使用moment进行转换

1.安装moment

npm install moment --save

2.在需要格式转换的vue页面中引入moment

import moment from 'moment'

3.在 export default中添加filter过滤器和时间转换函数

filters:{
  dateForm:function (el) {
    return moment(el).format('YYYY-MM-DD HH:mm:ss');
  }
}

4.在template模板中使用

<span>{{scope.row.time|dateForm}}</span>

即在变量名后加上格式转换函数名

这时,网页中显示为标准日期时间格式了

将时间戳转换为日期格式:moment、new Date()

1.new Date()方式

获取当前时间的时间戳:

Date.now() //=>1672974684470

将时间戳转换为日期时间:

new Date(1672974684470)
//=>Fri Jan 06 2023 11:11:24 GMT+0800 (中国标准时间)

注意:时间戳标准是以毫秒为单位的,所以一共有13位,如果位数只有10位,说明它是以秒为单位的。此时要把它转成毫秒单位再进行日期转换,不然时间日期就不对。

获取年份:

new Date(1672974684470).getFullYear()//=>2023

获取月份:

new Date(1672974684470).getMonth()//=>0

月份是从0开始计的,1月份就是0;

获取日期:

new Date(1672974684470).getDate()//=>6

获取时间戳是星期几:

new Date(1672974684470).getDay()//=>5

获取小时:getHours()、获取分钟:getMinutes()

2. moment函数方式

moment:日期格式化函数

在vue项目中使用这个函数的步骤:

下载moment模块:

npm i --save moment --legacy-peer-deps

引入模块:

import moment from 'moment'

最基本的用法:

//moment().format():格式化当前的时间
console.log(moment().format())//=>2023-01-06T13:21:11+08:00

传参数:

常见的“yyyy-mm-dd”格式:

console.log(moment().format('YYYY-MM-DD'))//=>2023-01-06

将时间戳转换为日期格式:

console.log(moment(1672974684470).format('YYYY-MM-DD'))//=>2023-01-06

3.配合过滤器fliter使用

<div class="grey-text">{{filmInfo.premiereAt | dateFilter}}上映</div>
import Vue from 'vue'
import moment from 'moment'
Vue.filter('dateFilter', (data) => {
  return moment(data * 1000).format('YYYY-MM-DD')
})//乘以1000的原因是,后端给的时间戳是以秒为单位的,在这里换算成毫秒

变换之前的时间戳效果:(后端给的数据是时间戳)

1671148800 上映

变换后的日期效果:

2022-12-16 上映

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯