要在Vue中封装一个时间插件以显示昨天和今天24小时的日期和时间,可以使用moment.js库来处理日期和时间,并封装为一个自定义组件。
<template>
<div>
<h3>前一天日期和时间范围:</h3>
<p>开始时间:{{ startTimeFormatted }}</p>
<p>结束时间:{{ endTimeFormatted }}</p>
</div>
</template>
<script>
import moment from 'moment';
export default {
data() {
return {
startTime: null,
endTime: null,
startTimeFormatted: null,
endTimeFormatted: null
};
},
mounted() {
this.calculateDateTimeRange();
this.formatDateTime();
},
methods: {
calculateDateTimeRange() {
let currentDate = moment();
let previousDate = moment().subtract(1, 'day');
this.startTime = previousDate.startOf('day');
this.endTime = currentDate.endOf('day');
},
formatDateTime() {
this.startTimeFormatted = this.startTime.format('YYYY-MM-DD HH:mm:ss');
this.endTimeFormatted = this.endTime.format('YYYY-MM-DD HH:mm:ss');
}
}
};
</script>