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') // 获取当前月份
转时间戳
const moment = require('moment'); const timeStr = '2022-11-11 00:00:00'; const timestamp = moment(timeStr).valueOf(); console.log(timestamp); // 输出时间戳,单位是毫秒
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· AI与.NET技术实操系列(二):开始使用ML.NET
· 单线程的Redis速度为什么快?