Vue项目安装使用moment.js方式

更新时间：2024年11月18日 14:52:30 作者：龙哥里格隆

文章介绍了如何在Vue项目中安装和使用moment.js,包括安装步骤、导入方法、汉化设置以及在Vue实例中使用moment.js进行日期处理

Vue项目如何安装使用moment.js

1、什么是moment.js

它是一个简单易用的轻量级Javascript日期处理类库，提供了日期格式化、日期解析等功能，且支持在浏览器和NodeJS两种环境中运行

2、Vue项目中安装

npm install moment --save

3、导入

在main.js中导入该组件

import moment from 'moment'//导入文件
moment.locale('zh-cn');//需要汉化
Vue.prototype.$moment = moment;//赋值使用

4、用法

this.moment()

本季度

const  start = moment().startOf('quarter').format('YYYY-MM-DD')   // 开始
const end = moment().endOf('quarter').format('YYYY-MM-DD')   // 结束

上个季度

const start = moment().quarter(moment().quarter() - 1).startOf('quarter').format('YYYY-MM-DD')
const end = moment().quarter(moment().quarter() - 1).endOf('quarter').format('YYYY-MM-DD')

本周

const start = moment().startOf('week') .add(1, 'day').format('YYYY-MM-DD HH:mm:ss')
const end = moment().endOf('week').add(1, 'day').format('YYYY-MM-DD HH:mm:ss')

上周

const start = moment().subtract(weekOfDay + 7 - 1, 'days') .format('YYYY-MM-DD')
const end  = moment().subtract(weekOfDay， 'days') .format('YYYY-MM-DD')

本年

const start = moment() .year(moment().year()) .startOf('year') .format('YYYY-MM-DD')
const end = moment() .year(moment().year())  .endOf('year').format('YYYY-MM-DD')

去年

const start = moment().year(moment().year() - 1).startOf('year') .format('YYYY-MM-DD')
const end = moment() .year(moment().year() - 1) .endOf('year') .format('YYYY-MM-DD')

今天

const start=moment().startOf('day').format('YYYY-MM-DD HH:mm:ss')
const end=moment().endOf('day').format('YYYY-MM-DD HH:mm:ss')

昨天

const start= moment().subtract('days',1).startOf('days').format('YYYY-MM-DD HH:mm:ss')
const end=moment().subtract('days',1).endOf('days').format('YYYY-MM-DD HH:mm:ss')

某一日期前一天后一天

starttime = moment(starttime).subtract(1,"days").format("YYYY-MM-DD");//前一天
endtime = moment(endtime).add(1,"days").format("YYYY-MM-DD");//后一天

当前月份的第一天&最后一天

moment().startOf('month').format("YYYY-MM-DD")
moment().endOf('month').format("YYYY-MM-DD"),

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

利用Vue实现数字翻滚动画效果展示
这篇文章主要介绍了利用Vue实现数字翻滚动画效果,通过Vue的响应式数据更新结合CSS3的动画效果,我们可以实现非常酷炫的数字翻滚效果,给数据可视化带来更多动感和吸引力,需要的朋友参考下吧
2024-04-04
前端vue项目打包及部署过程的详细说明
Vue前端项目的打包和部署是一个常见的开发流程,涉及多个步骤和配置,下面这篇文章主要介绍了前端vue项目打包及部署过程的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
2025-09-09
vue3快速实现主题切换功能的步骤详解
本文介绍一种基于css变量的主题切换实现方式,这种是最简单,最直接,最容易理解的方式,实现的原理就是定义不同的HTML根标签元素的样式,通过data属性来区分不同主题css变量样式,感兴趣的朋友可以参考下
2024-06-06
学习Vite的原理
这篇文章主要介绍了Vite的原理，Vite是一个更轻、更快的web应用开发工具，面向现代浏览，Vite创建的项目是一个普通的Vue3应用，相比基于Vue-cli创建的应用少了很多配置文件和依赖，下面基于Vite相关资料内容，需要的朋友可以参考一下
2022-02-02
Vue3实现高性能虚拟列表的两种方法
在前端开发中,大数据量列表渲染一直是性能挑战,假设我们有一个 API 返回 1 万条数据,如果直接渲染到页面,必然会导致严重卡顿甚至浏览器崩溃,解决方案就是虚拟列表,所以本文给大家介绍了本文两种实现,并给出适用场景,需要的朋友可以参考下
2025-08-08
vue2实现移动端上传、预览、压缩图片解决拍照旋转问题
这篇文章主要介绍了vue2实现移动端上传、预览、压缩图片解决拍照旋转问题,需要的朋友可以参考下
2017-04-04
Vue 3.0的attribute强制行为理解学习
这篇文章主要为大家介绍了Vue 3.0的attribute强制行为理解学习，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-08-08
vue2移动端使用vue-qrcode-reader实现扫一扫功能的步骤
最近在使用vue开发的h5移动端想要实现一个调用摄像头扫描二维码的功能,所以下面这篇文章主要给大家介绍了关于vue2移动端使用vue-qrcode-reader实现扫一扫功能的相关资料,需要的朋友可以参考下
2023-06-06
基于el-table封装的可拖拽行列、选择列组件的实现
本文主要介绍了基于el-table封装的可拖拽行列、选择列组件的实现，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-12-12
Vue+webpack项目基础配置教程
这篇文章主要介绍了Vue+webpack项目基础配置教程,需要的朋友可以参考下
2018-02-02