Moment.js是一个轻量级的JavaScript时间库,它方便了日常开发中对时间的操作,提高了开发效率。
日常开发中,通常会对时间进行下面这几个操作:比如获取时间,设置时间,格式化时间,比较时间等等。
官方网址:Moment.js官网
一、安装moment
可以使用安装命令:
npm install moment --save
直接安装moment
当然也可以直接下载moment.js
文件然后在项目中引入。
npm install moment --save
// 或者 yarn 命令
yarn add moment
二、直接在main.js文件中引入
在
main.js
文件中导入moment
,然后通过prototype
属性向Vue实例对象中添加属性或方法。
import moment from 'moment'
Vue.prototype.$moment = moment;
三、在组件中测试效果
在Vue组件中使用
moment
可以使用this.
继承,通过this.$moment()
就可以获取当前时间。如果你需要格式化获取到的时间格式,可以通过.format("YYYY-MM-DD")
方法来实现,里面的字符串为年月日的时间显示格式。
例如:
<template>
<div>{{ time }}</div>
</template>
<script>
export default {
data() {
return {
time: this.$moment().format("YYYY-MM-DD hh:mm:ss"), // 获取当前时间
};
},
};
</script>
扩展:
其他的一些格式:
this.$moment().format('YYYY-MM-DD HH:mm:ss') //"2021-07-09 16:30:40"
this.$moment().format('YYYY年MM月DD日 HH时mm分ss秒') //"2021年07月09日 16时30分45秒"
this.$moment().format('YYYY年MM月DD日 HH:mm:ss') // "2021年07月09日 16:31:18"
this.$moment().format('YYYY.MM.DD HH:mm:ss') //"2021.07.09 16:31:58"
多语言格式化(根据所选语言显示不同效果)
//设置语言
var locale = window.navigator.userLanguage || window.navigator.language;//"zh-CN"
moment.locale()//"en"
moment.locale('zh-cn');//"zh-cn"
moment.locale()//"zh-cn"
//中文
moment().format('L'); // 2021-07-09
moment().format('l'); // 2021-07-09
moment().format('LL'); // 2021年07月09日
moment().format('ll'); // 2021年07月09日
moment().format('LLL'); // 2021年07月09日下午4点32分
moment().format('lll'); // 2021年07月09日下午4点32分
moment().format('LLLL'); // 2021年07月09日星期五下午4点32分
moment().format('llll'); // 2021年07月09日星期五下午4点32分
//韩文
moment().format('L'); // 2021.07.09
moment().format('l'); // 2021.7.09
moment().format('LL'); // 2021년 7월 9일
moment().format('ll'); // 2021년 7월 9일
moment().format('LLL'); // 2021년 7월 9일 오후 4시 32분
moment().format('lll'); // 2021년 7월 9일 오후 4시 32분
moment().format('LLLL'); // 2021년 7월 9일 토요일 오후 4시 32분
moment().format('llll'); // 2021년 7월 9일 토 오후 4시 32분
使用moment.js获取/设置时间信息
moment().second() //获得 秒
moment().second(Number) //设置 秒。0 到 59
moment().minute() //获得 分
moment().minute(Number) //设置 分。0 到 59
// 类似的用法
moment().hour() // 小时
moment().date() // 一个月里的第几天
moment().day() // 星期几
moment().dayOfYear() // 一年里的第几天
moment().week() // 一年里的第几周
moment().month() // 第几个月
moment().quarter() // 一年里的第几个季度
moment().year() // 年
moment().daysInMonth() // 当前月有多少天
使用moment.js操作时间
moment().add(7, 'days') // 之后的第7天。第2个参数还可以是 'months', 'years' 等。注意是复数。
moment().add(7, 'd')// 与上面一行代码的运行结果一样。
moment().subtract(1, 'months') // 上个月
moment().startOf('week') // 这周的第一天
moment().startOf('hour') // 等效与 moment().minutes(0).seconds(0).milliseconds(0)。
// 还支持 'year','month' 等
moment().endOf('week')
版权声明:本文为weixin_49519738原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。