Vue.js 可能是目前最火的前端框架之一,而 Moment.js 作為一個(gè)專注于時(shí)間和日期操作的插件,在前端開發(fā)中也非常常見。那么,如何在 Vue.js 中使用 Moment.js 呢?
首先需要在項(xiàng)目中安裝 Moment.js,可以使用 npm 或者直接引入 CDN,并將其注冊(cè)為全局變量。接下來(lái),在 Vue.js 組件中可以通過 import 引入 Moment.js,并使用 this.$moment 進(jìn)行調(diào)用。例如,我們可以在 Vue.js 模板中展示當(dāng)前時(shí)間:
export default {
data() {
return {
currentTime: ''
};
},
mounted() {
this.$interval = setInterval(() => {
this.currentTime = this.$moment().format('YYYY-MM-DD HH:mm:ss');
}, 1000);
},
beforeDestroy() {
clearInterval(this.$interval);
}
};
在上面的代碼中,我們定義了一個(gè) data 中的 currentTime,然后在 mounted 鉤子函數(shù)中使用 setInterval 定時(shí)更新時(shí)間。我們調(diào)用了 this.$moment() 方法,然后通過 format() 方法將時(shí)間格式化成了 “YYYY-MM-DD HH:mm:ss” 的形式。最后,我們將這個(gè)時(shí)間字符串賦值給了 data 中的 currentTime。
另外,還有一些常用的 Moment.js 方法,比如計(jì)算兩個(gè)時(shí)間之間的時(shí)間差,可以使用 diff() 方法。例如:
const start = this.$moment('2020-01-01');
const end = this.$moment('2020-01-03');
const diff = end.diff(start, 'days'); // 2
上面的代碼中,我們創(chuàng)建了兩個(gè) Moment.js 對(duì)象 start 和 end,然后通過 diff() 方法計(jì)算了它們之間的時(shí)間差為 2 天。