vue moment用法,vue moment.js
Moment是一个多种语言支持的日期处理类库。如何在vue中使用？本文主要介绍了使用vue的moment的相关信息，有需要的朋友可以参考一下。
前言
在日常开发中，我们经常会遇到以下场景：
日期需要以非标准格式显示，比如：2021年5月11日星期二下午6: 42。
需要处理的日期，如：获取前24小时等。
这个时候使用js原生new Date()就有些麻烦了，于是我们找到了类库moment。
一、moment是什么？
Moment是一个JavaScript日期处理类库。
安装 moment
如果之前已经安装过，就不需要再安装了。
npm安装时刻-保存
注意：以下所有时间都是相对于当前时间：2021/05/11/18:42星期二。
1.日期格式化：
力矩()。格式( MMMM Do YYYY，h:mm:ss a )；//2021年5月11日下午6点42分31秒
力矩()。格式(“dddd”)；//星期二
力矩()。格式(“MMM Do YY”)；//5月11日21日
力矩()。格式( YYYY[转义]YYYY )；//2021逃2021
力矩()。format()；//2021-05-11T18:06:42 08:00
2.相对时间：
矩( 20111031 ， YYYYMMDD )。from now()；//2011/10/31是：10年前对比现在。
矩( 20120620 ， YYYYMMDD )。from now()；//2012/06/20是：9年前相对于现在
力矩()。startOf(day )。from now()；//当前日期是：2021/05/11/00:00:00，而不是现在：19小时前。
力矩()。endOf(日)。from now()；//当前日期的结束时间为：2021/05/11/24:00:00。与现在的日期相比，是：5小时以内。
力矩()。startOf(小时)。from now()；//当前日期的小时是：2021/05/11/18:00:00。相对于现在的时间：42分钟前。
3.日历时间：
力矩()。减去(10，“天”)。日历()；//当前时间向前推10天的日历时间：2021年5月1日
力矩()。减去(6，“天”)。日历()；//当前时间向前推6天：上周三18:42
力矩()。减去(3，“天”)。日历()；//当前时间向前推3天：上周六18:42
力矩()。减去(1，“天”)。日历()；//当前时间向前推1天：昨天18:42
力矩()。日历()；//今天18:42
力矩()。添加(1，“天”)。日历()；//当前时间推后1天：明天18:42
力矩()。添加(3，“天”)。日历()；//当前时间后推3天：下周五18:42
力矩()。添加(10，天)。日历()；//当前时间后推10天：2021年5月21日
4.多语言支持：
moment . locale()；//zh-cn
力矩()。格式( LT )；//18:42
力矩()。格式(“LTS”)；//18:42:31
力矩()。格式( L )；//2021/05/11
力矩()。格式( l )；//2021/5/11
力矩()。格式( LL )；//2021年5月11日
力矩()。格式( ll )；//2021年5月11日
力矩()。格式(“LLL”)；//2021年5月11日下午6: 42
力矩()。格式( lll )；//2021年5月11日18:42
力矩()。格式(“LLLL”)；//2021年5月11日星期二下午6: 42
力矩()。格式( llll )；//2021年5月11日星期二18:42
二、使用步骤（例：默认查询时间24小时之前~当前时间）
1.引入库
$ npm安装时刻-保存
2.在main.js中全局引入（也可单独在使用的文件中引入，具体看需求）
从“时刻”导入时刻
Vue.prototype. $ moment=moment
3.在需要使用日期的地方使用
在HTML中：
El-日期选择器
v-model=时间范围
type=datetimerange
范围分隔符=到
Start-placeholder=开始日期
End-placeholder=结束日期
/El-日期选择器
在JS中：
data() {
返回{
时间范围：[]，
}
},
已安装(){
让我们开始吧。$moment()。减法( 1 ， d )。格式( YYYY-MM-DD HH:mm:ss) //当前时间向前推1天(24小时):2021-05-10 18:42:53
End=这个。$ moment()。格式( yyyy-mm-ddhh:mm:ss )//当前时间：2021-05-11 18:42:53
this . time range=[开始，结束]
},
三、日期格式
格式
意义
举个例子
评论
年份
年
2021
Tongyyyyy
M
月球
一个
不要构成0
梅智节拍器
月球
01
d
太阳
2
不要构成0
截止日期（Deadline Date的缩写）
太阳
02
嗒嗒球拍
周
星期二
H
小时
三
24小时制；不要构成0
殿下
小时
18
24小时制
h
小时
三
2小时制，必须与或一起使用；不要构成0
倍硬
小时
03
2小时制，必须与或一起使用。
m
分钟
四
不要构成0
毫米
分钟
04
s
第二
五
不要构成0
悬浮物
第二
05
A
上午/下午
是
只有格式可用，大写
a
上午/下午
是
只有格式可用，小写
具体的方法和参数可以在moment的官方文档中找到。
四、new Date() 相关
写的日期那么多，new Date()应该一起总结。
let time=new Date()；//获取当前时间2021年5月11日星期二18:42:51 GMT 0800(中国标准时间)
let year=time . get full year()；//获取2021年
let month=time . getmonth()1；//获取第5个月
let day=time . getdate()；//得到第11天
设h=time . get hours()；//获取小时18
设m=time . get minutes()；//获取分钟数42
let s=time . get seconds()；//获取秒51
let weekDay=time . getday()；//获取一周的星期二
总结
关于vue moment的介绍和使用的这篇文章到此为止。关于vue moment使用的更多信息，请搜索我们之前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。