以下代码可以实现获取当前时间并实时显示,朋友们直接copy使用即可,希望可以帮助到有需要的朋友们!
<template>
<div class="time">{{ datetimeStr }}</div>
</template>
<script>
export default {
data() {
return {
datetimeStr: '', // 显示当前时间
formatDate: null, // 定时器}
}
}
mounted() {
this.updateDateTime();
this.formatDate = setInterval(() => {
this.updateDateTime();
}, 1000);
}
unmounted() { // 在Vue实例销毁前,清除时间定时器
if (this.formatDate) {
clearInterval(this.formatDate);
}
}
methods: {
updateDateTime() { // 格式化需要展示的时间格式
const now = new Date();
const year = now.getFullYear();
let month = now.getMonth() + 1;
let day = now.getDate();
const weekday = now.getDay();
let hours = now.getHours();
let minutes = now.getMinutes();
let seconds = now.getSeconds();
// 将月份和日期补零
month = month < 10 ? '0' + month : month;
day = day < 10 ? '0' + day : day;
hours = hours < 10 ? '0' + hours : hours;
minutes = minutes < 10 ? '0' + minutes : minutes;
seconds = seconds < 10 ? '0' + seconds : seconds;
// 星期数组
const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
// 格式化日期时间
this.datetimeStr = year + "年" + month + "月" + day + "日 " + weekdays[weekday] + " " + hours + ":" + minutes + ":" + seconds;
}
}
}
</script>