广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue使用moment如何将时间戳转为标准日期时间格式
  • 508
分享到

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

vue使用momentmoment时间戳vue标准日期时间格式 2023-05-20 05:05:20 508人浏览 八月长安
摘要

目录使用moment将时间戳转为标准日期时间格式将时间戳转换为日期格式:moment、new Date()1.new Date()方式2. moment函数方式3.配合过滤器flit

使用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

传参数:

  • moment()和format()里可以通过传参数来设置如何格式化时间:
  • 详情见网址:Http://momentjs.cn/

常见的“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 上映

总结

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

--结束END--

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

本文链接: https://www.lsjlt.com/news/213981.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue使用moment如何将时间戳转为标准日期时间格式
    目录使用moment将时间戳转为标准日期时间格式将时间戳转换为日期格式:moment、new Date()1.new Date()方式2. moment函数方式3.配合过滤器flit...
    99+
    2023-05-20
    vue使用moment moment时间戳 vue标准日期时间格式
  • vue如何使用moment处理时间戳转换成日期或时间格式
    目录一、使用环境二、安装moment三、在vue所需页面进行引入五、最终效果 六、moment中文官网总结一、使用环境 Moment 被设计为在浏览器和 Node.js 中...
    99+
    2022-11-13
  • 如何用PHP将Unix时间戳转为日期时间格式
    Unix时间戳是指从1970年1月1日0时0分0秒起至当前时间的总秒数,它是Linux、Unix系统所采用的一种时间表示标准,也被广泛应用于Web开发中。在PHP中,我们可以把Unix时间戳转换为日期时间格式,以便更好地呈现时间信息。本文将...
    99+
    2023-05-14
    php php时间戳
  • vue怎么使用moment处理时间戳转换成日期或时间格式
    本篇内容主要讲解“vue怎么使用moment处理时间戳转换成日期或时间格式”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue怎么使用moment处理时间戳转换成日期或时间格式”吧!一、使用环境...
    99+
    2023-06-29
  • 怎么用PHP将Unix时间戳转为日期时间格式
    今天小编给大家分享一下怎么用PHP将Unix时间戳转为日期时间格式的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。使用date...
    99+
    2023-07-05
  • 如何用php将日期格式转为Unix时间戳
    这篇文章主要介绍“如何用php将日期格式转为Unix时间戳”,在日常操作中,相信很多人在如何用php将日期格式转为Unix时间戳问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”如何用php将日期格式转为Unix...
    99+
    2023-07-05
  • 在PHP中如何将时间戳转化为日期和时间格式
    本篇内容介绍了“在PHP中如何将时间戳转化为日期和时间格式”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!什么是时间戳时间戳是指自1970年1...
    99+
    2023-07-05
  • MongoDB中怎么将时间戳转为日期格式
    这篇文章给大家介绍MongoDB中怎么将时间戳转为日期格式,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。MongoDB模糊查询方法示例:模糊查询:tname包含某个关键字测试'...
    99+
    2022-10-18
  • javascript将时间戳转为日期格式的方法
    本篇内容主要讲解“javascript将时间戳转为日期格式的方法”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“javascript将时间戳转为日期格式的方法”吧...
    99+
    2022-10-19
  • php如何将13位时间戳转换为标准时间戳
    PHP是一种非常流行的编程语言,许多人使用它来开发Web应用程序和网站。在处理时间戳时,您可能需要将13位时间戳转换为标准时间戳。在本文中,我将向您展示如何在PHP中将13位时间戳转换为标准时间戳。什么是时间戳?时间戳是一个用于表示日期和时...
    99+
    2023-05-14
    php php时间戳
  • 怎么用php将日期格式转为Unix时间戳
    在Web开发中,处理日期是很常见的任务。PHP作为一门服务器端编程语言,提供了一些有用的函数来处理日期。其中最常用的是将一个日期字符串转换为Unix时间戳,这对于日期比较和排序操作非常有用。本文将介绍如何使用PHP将日期格式转换为Unix时...
    99+
    2023-05-14
    php php时间戳
  • 如何使用PHP将时间戳转成日期格式
    PHP是一门功能强大的编程语言,它不仅能够完成网站和应用程序的开发,还支持各种数据操作和处理。在实际开发过程中,我们常常需要将时间戳转换成可读性更强的日期格式。下面就让我们来学习如何使用PHP将时间戳转成日期格式。什么是时间戳?时间戳指的是...
    99+
    2023-05-14
    php
  • php如何将时间戳转为日期
    本篇内容主要讲解“php如何将时间戳转为日期”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“php如何将时间戳转为日期”吧!PHP提供了两个函数可以用来处理时间戳和日期。这些函数分别是 date(...
    99+
    2023-07-05
  • php如何将日期转为时间戳
    小编给大家分享一下php如何将日期转为时间戳,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!php有什么用php是一个嵌套的缩写名称,是英文超级文本预处理语言,它的...
    99+
    2023-06-15
  • php如何用strtotime函数将日期格式转为时间戳
    本篇内容介绍了“php如何用strtotime函数将日期格式转为时间戳”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!日期格式转时间戳是在PH...
    99+
    2023-07-05
  • mysql时间戳如何转换为日期格式
    这篇文章主要为大家展示了“mysql时间戳如何转换为日期格式”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“mysql时间戳如何转换为日期格式”这篇文章吧。 ...
    99+
    2022-10-19
  • PHP中怎么将时间戳转换为日期格式
    本篇内容主要讲解“PHP中怎么将时间戳转换为日期格式”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“PHP中怎么将时间戳转换为日期格式”吧!一、什么是时间戳时间戳是指从1970年1月1日00:00...
    99+
    2023-07-05
  • php怎么将ymd格式的日期转为时间戳
    本文小编为大家详细介绍“php怎么将ymd格式的日期转为时间戳”,内容详细,步骤清晰,细节处理妥当,希望这篇“php怎么将ymd格式的日期转为时间戳”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。一、 什么是时间戳...
    99+
    2023-07-06
  • 如何使用PHP将时间戳转为美式时间格式
    在使用PHP进行时间相关操作时,很多时候需要将时间戳转换为美式(MM/DD/YYYY HH:MM:SS)格式的时间。在这篇文章中,我们将介绍如何使用PHP将时间戳转换为美式时间格式。一、时间戳是什么?首先,我们需要了解时间戳是什么。时间戳是...
    99+
    2023-05-14
  • php如何将时间戳转换为时间格式
    这篇“php如何将时间戳转换为时间格式”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“php如何将时间戳转换为时间格式”文章吧...
    99+
    2023-07-05
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作