本周時間戳,是指顯示當前周的開始和結束日期。在 Vue 中,我們可以使用 moment.js 庫來實現這個功能。
首先,我們需要安裝 moment.js 庫:
npm install moment --save
接著,在 Vue 組件里引入 moment.js 庫:
import moment from 'moment';
我們可以在組件的計算屬性里定義本周時間戳的方法:
computed: {
thisWeek() {
let now = moment();
let startOfWeek = now.clone().startOf('week');
let endOfWeek = now.clone().endOf('week');
return {
start: startOfWeek.format('YYYY-MM-DD'),
end: endOfWeek.format('YYYY-MM-DD')
}
}
}
代碼解釋:
- 創建一個 moment 對象表示當前時間戳。
- 使用 clone() 方法創建一個新的 moment 對象,代表當前周的開始日期。
- 使用 startOf('week') 方法將日期調整為本周的開始日期。
- 同樣,使用 clone() 和 endOf('week') 方法獲取本周結束日期。
- 使用 format() 方法將日期格式化為 'YYYY-MM-DD' 格式。
最后,在組件中使用 thisWeek 計算屬性獲取本周時間戳:
<template>
<div>
<p>本周時間戳:{{ thisWeek.start }} ~ {{ thisWeek.end }}</p>
</div>
</template>
代碼解釋:
- 在模板中使用 {{ thisWeek.start }} 和 {{ thisWeek.end }} 分別顯示本周開始和結束日期。
這樣,我們就成功實現了本周時間戳的功能。
上一篇vue 權限控制demo
下一篇vue ref動態綁定