Vue 时间插件 moment 使用

下载安装

npm install moment -s

注册引用

全局方法

main.js 里面注册生成

import * as moment from 'moment'

Vue.prototype.$moment = moment

全局过滤器

全局过滤器实现日期格式化

// 用法:1.{{ item.time | format("YYYY-MM-DD HH:mm:ss") }}
// 用法:2. this.$moment(this.time).format("YYYY-MM-DD HH:mm:ss");
Vue.filter('format', function (input, fmtstring) {
  // 使用momentjs这个日期格式化类库实现日期的格式化功能
  return moment(input).format(fmtstring);
});

使用

常用相对时间

现在时间: 2022年6月22日10:24:38

// 2020-05-30 相对于现在是 2 年前

this.$moment("2020-05-30", "YYYY-MMDD").fromNow() 

// 当前日期开始即:2022/06/22/00:00:00 相对于现在是 10 小时前

this.$moment().startOf('day').fromNow()  

// 当前日期结束即:2022/06/22/24:00:00 相对于现在是 14 小时内
this.$moment().endOf('day').fromNow()  

// 当前日期小时开始即:2022/06/22/10:00:00 相对于现在是 24 分钟前

this.$moment().startOf('hour').fromNow()  

常用格式化日历时间

第二个参数 传 'days' 是天 、'month' 是月 、'year' 是年

this.$moment().subtract(30, 'days').format("YYYY-MM-DD");  // 当前时间往前推 30 天

this.$moment().subtract(10, 'days').format("YYYY-MM-DD");  // 当前时间往前推 10 天

this.$moment().subtract(3, 'days').format("YYYY-MM-DD");  // 当前时间往前推 3 天

this.$moment().subtract(1, 'days').format("YYYY-MM-DD");  // 当前时间往前推 1 天

this.$moment().calendar();  // 当前时间(今天)

this.$moment().add(1, 'days').format("YYYY-MM-DD");  // 当前时间往后推 1 天

this.$moment().add(3, 'days').format("YYYY-MM-DD");  // 当前时间往后推 3 天

this.$moment().add(10, 'days').format("YYYY-MM-DD");  // 当前时间往后推 10 天

this.$moment().add(30, 'days').format("YYYY-MM-DD");  // 当前时间往后推 30 天

常用格式化

this.$moment().format("YYYY-MM-DD")  // 获取当前日期

this.$moment(value).format("YYYY-MM-DD")  // 格式化指定日期 value 的格式 年-月-日

this.$moment(value).valueOf()  // 获取指定日期 value 的时间戳

this.$moment(value).daysInMonth()  // 获取指定日期 value 所在月的天数,不传获取当前月

this.$moment().startOf('month').weekday()  // 获取当前月第一天是星期几this.$moment().format('MM')  // 获取当前月份

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐