原理:调用获取年月日等时间函数后封装到自己写的获取当前时间的getDate函数中,getDate函数会将获取到的函数重新复制给在data中定义的变量nowDate,然后设置定时器一秒调用一次getDate函数,再把定时器放入生命周期函数created中,最后用插值语法把nowDate放到指定的位置即可
实现代码如下:
<template>
<div class="container">
<div class="header">
<div class="dateTime">当前时间: {
{ nowDate }}</div>
</div>
<div class="footer"></div>
</div>
</template>
<script>
export default {
name: "realTime",
created() {
this.currentTime()
},
data() {
return {
nowDate:'',
}
},
methods: {
//获取当前时间
getDate() {
let date = new Date();
let year = date.getFullYear(); // 年
let month = date.getMonth() + 1; // 月
let day = date.getDate(); // 日
let week = date.getDay(); // 星期
let weekArr = [ "星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六" ];
let hour = date.getHours(); // 时
hour = hour < 10 ? "0" + hour : hour; // 如果只有一位,则前面补零
let minute = date.getMinutes(); // 分
minute = minute < 10 ? "0" + minute : minute; // 如果只有一位,则前面补零
let second = date.getSeconds(); // 秒
second = second < 10 ? "0" + second : second; // 如果只有一位,则前面补零
this.nowDate = `${year}年${month}月${day}日 ${hour}时${minute}分${second}秒 ${weekArr[week]}`;
},
//定时器调取当前时间
currentTime(){
setInterval(()=>{
this.getDate()
},1000)
},
}
}
</script>