Vue項(xiàng)目安裝使用moment.js方式
更新時(shí)間：2024年11月18日 14:52:30 作者：龍哥里格隆
文章介紹了如何在Vue項(xiàng)目中安裝和使用moment.js,包括安裝步驟、導(dǎo)入方法、漢化設(shè)置以及在Vue實(shí)例中使用moment.js進(jìn)行日期處理
Vue項(xiàng)目如何安裝使用moment.js
1、什么是moment.js
它是一個(gè)簡(jiǎn)單易用的輕量級(jí)Javascript日期處理類庫，提供了日期格式化、日期解析等功能，且支持在瀏覽器和NodeJS兩種環(huán)境中運(yùn)行
2、Vue項(xiàng)目中安裝
npm install moment --save
3、導(dǎo)入
在main.js中導(dǎo)入該組件
import moment from 'moment'//導(dǎo)入文件
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') // 結(jié)束- 上個(gè)季度
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");//后一天- 當(dāng)前月份的第一天&最后一天
moment().startOf('month').format("YYYY-MM-DD")
moment().endOf('month').format("YYYY-MM-DD"),總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
利用Vue實(shí)現(xiàn)數(shù)字翻滾動(dòng)畫效果展示
這篇文章主要介紹了利用Vue實(shí)現(xiàn)數(shù)字翻滾動(dòng)畫效果,通過Vue的響應(yīng)式數(shù)據(jù)更新結(jié)合CSS3的動(dòng)畫效果,我們可以實(shí)現(xiàn)非?？犰诺臄?shù)字翻滾效果,給數(shù)據(jù)可視化帶來更多動(dòng)感和吸引力,需要的朋友參考下吧2024-04-04
前端vue項(xiàng)目打包及部署過程的詳細(xì)說明
Vue前端項(xiàng)目的打包和部署是一個(gè)常見的開發(fā)流程,涉及多個(gè)步驟和配置,下面這篇文章主要介紹了前端vue項(xiàng)目打包及部署過程的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-09-09
vue3快速實(shí)現(xiàn)主題切換功能的步驟詳解
本文介紹一種基于css變量的主題切換實(shí)現(xiàn)方式,這種是最簡(jiǎn)單,最直接,最容易理解的方式,實(shí)現(xiàn)的原理就是定義不同的HTML根標(biāo)簽元素的樣式,通過data屬性來區(qū)分不同主題css變量樣式,感興趣的朋友可以參考下2024-06-06
這篇文章主要介紹了Vite的原理，Vite是一個(gè)更輕、更快的web應(yīng)用開發(fā)工具，面向現(xiàn)代瀏覽，Vite創(chuàng)建的項(xiàng)目是一個(gè)普通的Vue3應(yīng)用，相比基于Vue-cli創(chuàng)建的應(yīng)用少了很多配置文件和依賴，下面基于Vite相關(guān)資料內(nèi)容，需要的朋友可以參考一下2022-02-02
在前端開發(fā)中,大數(shù)據(jù)量列表渲染 一直是性能挑戰(zhàn),假設(shè)我們有一個(gè) API 返回 1 萬條數(shù)據(jù),如果直接渲染到頁面,必然會(huì)導(dǎo)致嚴(yán)重卡頓甚至瀏覽器崩潰,解決方案就是虛擬列表,所以本文給大家介紹了本文兩種實(shí)現(xiàn),并給出適用場(chǎng)景,需要的朋友可以參考下2025-08-08
vue2實(shí)現(xiàn)移動(dòng)端上傳、預(yù)覽、壓縮圖片解決拍照旋轉(zhuǎn)問題
這篇文章主要介紹了vue2實(shí)現(xiàn)移動(dòng)端上傳、預(yù)覽、壓縮圖片解決拍照旋轉(zhuǎn)問題,需要的朋友可以參考下2017-04-04
Vue 3.0的attribute強(qiáng)制行為理解學(xué)習(xí)
這篇文章主要為大家介紹了Vue 3.0的attribute強(qiáng)制行為理解學(xué)習(xí)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
vue2移動(dòng)端使用vue-qrcode-reader實(shí)現(xiàn)掃一掃功能的步驟
最近在使用vue開發(fā)的h5移動(dòng)端想要實(shí)現(xiàn)一個(gè)調(diào)用攝像頭掃描二維碼的功能,所以下面這篇文章主要給大家介紹了關(guān)于vue2移動(dòng)端使用vue-qrcode-reader實(shí)現(xiàn)掃一掃功能的相關(guān)資料,需要的朋友可以參考下2023-06-06
基于el-table封裝的可拖拽行列、選擇列組件的實(shí)現(xiàn)
本文主要介紹了基于el-table封裝的可拖拽行列、選擇列組件的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-12-12
Vue+webpack項(xiàng)目基礎(chǔ)配置教程
這篇文章主要介紹了Vue+webpack項(xiàng)目基礎(chǔ)配置教程,需要的朋友可以參考下2018-02-02