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