Vue 时间插件 moment 使用
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') // 获取当前月份
Vue 时间插件 moment 使用相关推荐
- vue 时间插件_Vue3 插件开发详解尝鲜版「值得收藏」
作者:lishuai 转发链接:https://segmentfault.com/a/1190000022757326 前言 vue3.0-beta 版本已经发布了一段时间了,正式版本据说在年中发布( ...
- vue 时间回显 格式化_VSCode 开发Vue必备插件
1.Vetur -- 语法高亮.智能感知.Emmet等 包含格式化功能, Alt+Shift+F (格式化全文),Ctrl+K Ctrl+F(格式化选中代码,两个Ctrl需要同时按着) 2.EsLin ...
- vue 图片引入_一个Vue的时间插件
安装 npm install -S hzqing-vue-timeline 如何引入 main.js: // 全局注册import hzqingVueTimeline from 'hzqing-vue ...
- vue 判断两个时间插件结束时间必选大于开始时间
mounted () {$(function(){$('#startTime,#endTime').change(function () {console.log('xx')var _this = $ ...
- 实用VUE 开发插件!!前端必备
element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI ...
- VSCode 开发Vue必备插件
工欲善其事,必先利其器 以下就是开发Vue必备插件: Vetur -- 语法高亮.智能感知.Emmet等 包含格式化功能, Alt+Shift+F (格式化全文),Ctrl+K Ctrl+F(格式化选 ...
- vscode 开发vue必备插件_vsCode开发vue项目必备插件
VSCode 开发Vue必备插件 对于很多使用vscode编写vue项目的新手同学来说,可能不知道使用什么插件,这里简单说一下我常用的几款插件. 1. vetur 实现在 vue 文件中: 语法错误检 ...
- 好用的vue组件插件及框架
实用的vue插件大汇总 Vue是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件特别整理了常用的vue插件,来了个大汇总 ...
- vue自定义插件 封装一个类似 element 中 message 消息提示框的插件
vue自定义插件 封装一个类似 element 中 message 消息提示框的插件 一.资源文档 1.vue内置组件 transition 2.Vue.use() 3.Vue.extend() 4. ...
最新文章
- mysql数据库存表情报错_mysql数据库存表情报错
- Vue、element-ui的resetFields()方法重置表单无效问题及解决办法
- java点击图片发出声音_[Java教程]点击放大图片
- Java基础学习总结(139)——Java8 Stream之Stream接口入门简介
- FFmpeg之yuv镜像(十八)
- 开源 java CMS - FreeCMS2.7 单位管理
- 如何编写一份高质量的测试计划
- QT应用编程: 编写HC05串口蓝牙调试助手(Android系统APP)
- win10 串口驱动下载链接
- PaperMax,一个可智能改重的免费论文查重网站。
- qc快充协议2.0/3.0
- 修改域名指向的服务器,让域名指向服务器
- 每个人都能制作的简易版狂拍灰太狼小游戏(HTML+CSS+JavaScript)
- RHCSA认证培训+考试七天实录(一)
- 苹果公司的 iCloud
- python爬虫个人学习笔记
- 载波通信在电网智能化中的应用
- multisim与门测试
- SAS 运行过程中出现‘SAS 磁盘已满 OUT OF RESOURCES’解决办法!
- 介绍一下Gilde和Picasso以及它们的区别
热门文章
- Linux实战教学笔记28:企业级LNMP环境应用实践
- 狂神docker学习笔记
- 雷电2接口_了解这些常用接口一定会有用的
- python移动窗口函数_设置窗口图标和移动窗口
- 惠普打印机2132故障灯大全图解_绝对干货!二手打印机选购攻略!
- w10桌面计算机图标箭头去除,Win10怎么去除桌面快捷方式图标左下角的小箭头
- 多目标优化算法(四)NSGA3(NSGAIII)论文复现以及matlab和python的代码
- 《0Day安全》之堆溢出
- 用duilib制作仿QQ2013动态背景登录器
- Alibaba Cloud Linux 3 正式发布!新特性来了!