一区二区三区在线-一区二区三区亚洲视频-一区二区三区亚洲-一区二区三区午夜-一区二区三区四区在线视频-一区二区三区四区在线免费观看

服務(wù)器之家:專注于服務(wù)器技術(shù)及軟件下載分享
分類導(dǎo)航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服務(wù)器之家 - 編程語言 - JavaScript - vue.js - Vue如何使用Dayjs計(jì)算常用日期詳解

Vue如何使用Dayjs計(jì)算常用日期詳解

2022-02-15 18:09靜沐靜好 vue.js

這篇文章主要給大家介紹了關(guān)于Vue如何使用Dayjs計(jì)算常用日期的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

在使用vue開發(fā)項(xiàng)目時(shí),前端常常需要計(jì)算一些日期時(shí)間,如:

  • 計(jì)算周月截止日期
  • 計(jì)算XX天前/后的日期
  • 將時(shí)間戳轉(zhuǎn)換為日期(YYYY-MM-DD)
  • 計(jì)算月天數(shù)
  • 日期轉(zhuǎn)時(shí)間戳

推薦一個(gè)輕量的處理時(shí)間和日期的 JavaScript 庫:dayjs

使用這個(gè)插件計(jì)算常用日期十分方便

1、在項(xiàng)目中安裝dayjs,命令為:npm install dayjs --save

2、在main.js中,添加如下2句代碼

import dayjs from "dayjs";
Vue.prototype.dayjs = dayjs;

Vue如何使用Dayjs計(jì)算常用日期詳解

3、在頁面需要使用的地方,直接使用

當(dāng)前日期或時(shí)間戳轉(zhuǎn)換,format后面就跟著想要格式化的內(nèi)容,**dayjs( ) **括號中不放任何參數(shù),默認(rèn)為當(dāng)前日期,也可以放一個(gè)時(shí)間戳,直接轉(zhuǎn)換

(注意:使用Element組件的日期選擇器,其value-format屬性要求:

 

組件 Dayjs(format) Element(value-format)
YYYY yyyy
MM MM
DD dd
時(shí) HH HH
mm mm
ss ss

 

其中年和日的表達(dá)略有不同,容易混)

this.dayjs().format("YYYY-MM-DD")
this.dayjs().format("YYYY-MM-DD HH:mm")
this.dayjs(1614787200000).format("YYYY-MM-DD HH:mm:ss")

Vue如何使用Dayjs計(jì)算常用日期詳解

2.計(jì)算某周/某月/某年的起始截止日期,所使用到的方法為startOf()endOf(),括號中可以是"week" 、 “month”、 “year”
(ps:加format是為了更加直觀)

this.dayjs().startOf("week");
this.dayjs().endOf("week").format("YYYY-MM-DD");
this.dayjs().startOf("month").format("YYYY-MM-DD");
this.dayjs("2021-02-09").endOf("month").format("YYYY-MM-DD");

Vue如何使用Dayjs計(jì)算常用日期詳解

計(jì)算日期,如幾天前、幾天后日期,

 

前(減) 后(加)
subtract(參數(shù)1,參數(shù)2) add(參數(shù)1,參數(shù)2)
參數(shù)1 數(shù)字
參數(shù)2 單位(“week” 、 “month”、 “year”)

 

this.dayjs().subtract(3,"day").format("YYYY-MM-DD")
this.dayjs().subtract(3,"month").format("YYYY-MM-DD")
this.dayjs().add(12,"day").format("YYYY-MM-DD")
this.dayjs("2021-03-12").add(45,"day").format("YYYY-MM-DD")

Vue如何使用Dayjs計(jì)算常用日期詳解

5. 獲取月天數(shù),使用方法dayInMonth()

 this.dayjs().daysInMonth();
 this.dayjs("2021-02-09").daysInMonth();
 this.dayjs("2021-01").daysInMonth();

Vue如何使用Dayjs計(jì)算常用日期詳解

6、普通日期轉(zhuǎn)換為時(shí)間戳

this.dayjs().unix()
this.dayjs("2020-10-04").unix()

Vue如何使用Dayjs計(jì)算常用日期詳解

總結(jié)

到此這篇關(guān)于Vue如何使用Dayjs計(jì)算常用日期的文章就介紹到這了,更多相關(guān)Vue計(jì)算常用日期內(nèi)容請搜索服務(wù)器之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持服務(wù)器之家!

原文鏈接:https://blog.csdn.net/Sunshine__Girl/article/details/114496906

延伸 · 閱讀

精彩推薦
  • vue.jsVue項(xiàng)目中實(shí)現(xiàn)帶參跳轉(zhuǎn)功能

    Vue項(xiàng)目中實(shí)現(xiàn)帶參跳轉(zhuǎn)功能

    最近做了一個(gè)手機(jī)端系統(tǒng),其中遇到了父頁面需要攜帶參數(shù)跳轉(zhuǎn)至子頁面的問題,現(xiàn)已解決,下面分享一下實(shí)現(xiàn)過程,感興趣的朋友一起看看吧...

    YiluRen丶4302022-03-03
  • vue.jsVue多選列表組件深入詳解

    Vue多選列表組件深入詳解

    這篇文章主要介紹了Vue多選列表組件深入詳解,這個(gè)是vue的基本組件,有需要的同學(xué)可以研究下...

    yukiwu6752022-01-25
  • vue.jsVue中引入svg圖標(biāo)的兩種方式

    Vue中引入svg圖標(biāo)的兩種方式

    這篇文章主要給大家介紹了關(guān)于Vue中引入svg圖標(biāo)的兩種方式,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的...

    十里不故夢10222021-12-31
  • vue.js用vite搭建vue3應(yīng)用的實(shí)現(xiàn)方法

    用vite搭建vue3應(yīng)用的實(shí)現(xiàn)方法

    這篇文章主要介紹了用vite搭建vue3應(yīng)用的實(shí)現(xiàn)方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下...

    Asiter7912022-01-22
  • vue.js梳理一下vue中的生命周期

    梳理一下vue中的生命周期

    看過很多人講vue的生命周期,但總是被繞的云里霧里,尤其是自學(xué)的同學(xué),可能js的基礎(chǔ)也不是太牢固,聽起來更是吃力,那我就已個(gè)人之淺見,以大白話...

    CRMEB技術(shù)團(tuán)隊(duì)7992021-12-22
  • vue.js詳解vue 表單綁定與組件

    詳解vue 表單綁定與組件

    這篇文章主要介紹了vue 表單綁定與組件的相關(guān)資料,幫助大家更好的理解和學(xué)習(xí)使用vue框架,感興趣的朋友可以了解下...

    Latteitcjz6432022-02-12
  • vue.jsVue2.x 項(xiàng)目性能優(yōu)化之代碼優(yōu)化的實(shí)現(xiàn)

    Vue2.x 項(xiàng)目性能優(yōu)化之代碼優(yōu)化的實(shí)現(xiàn)

    這篇文章主要介紹了Vue2.x 項(xiàng)目性能優(yōu)化之代碼優(yōu)化的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋...

    優(yōu)小U9632022-02-21
  • vue.jsVue2.x-使用防抖以及節(jié)流的示例

    Vue2.x-使用防抖以及節(jié)流的示例

    這篇文章主要介紹了Vue2.x-使用防抖以及節(jié)流的示例,幫助大家更好的理解和學(xué)習(xí)使用vue框架,感興趣的朋友可以了解下...

    Kyara6372022-01-25
主站蜘蛛池模板: 掰开逼操| 香蕉久久一区二区三区啪啪 | 国产亚洲成归v人片在线观看 | 99亚洲 | 国产精品一区二区久久不卡 | 嫩草影院永久在线播放 | 能播放18xxx18女同 | 亚洲福利电影一区二区? | 国产精品麻豆免费版 | 亚洲天堂男人 | 色中文字幕 | 亚洲bt区 | 精品国产乱码久久久人妻 | 特色特色大片在线 | 欧美伊香蕉久久综合类网站 | 91九色视频无限观看免费 | 欧美视频一区二区三区在线观看 | 亚洲国产婷婷俺也色综合 | 午夜精品亚洲 | 欧美性白人顶级hd | 网红刘婷hd国产高清 | 国产精品成人一区二区1 | 青青色综合 | 高清色黄毛片一级毛片 | 九九久久国产精品大片 | 大陆国产vs国产对白 | 色五月天天 | 青青青国产手机在线播放 | 亚洲热在线观看 | 精品无人区乱码1区2区3区免费 | 337p大尺度啪啪人体午夜2020 | 青青草原国产一区二区 | 天天做天天爰夜夜爽 | 国产日本久久久久久久久婷婷 | 变态 另类 人妖小说 | 免费视频亚洲 | 欧美xxoo做爰猛烈视频 | 久久视频精品3线视频在线观看 | 国产一级在线观看视频 | 喜马拉雅听书免费版 | 特黄特色大片免费影院 |