显示当前日期 时间和星期 且实时刷新

代码明细在底部。

源码：

html部分

<template><!-- 获取当前日期、时间、周几 --><div>{{ nowDate }} {{ nowTime }} {{ nowWeek }}</div></template>

js部分

<script>export default {data() {return {nowDate: "", // 当前日期nowTime: "", // 当前时间nowWeek: "", // 当前星期};},methods: {dealWithTime(data) {// 获取当前时间let formatDateTime;let Y = data.getFullYear();let M = data.getMonth() + 1;let D = data.getDate();let H = data.getHours();let Min = data.getMinutes();let S = data.getSeconds();let W = data.getDay();H = H < 10 ? "0" + H : H;Min = Min < 10 ? "0" + Min : Min;S = S < 10 ? "0" + S : S;switch (W) {case 0:W = "日";break;case 1:W = "一";break;case 2:W = "二";break;case 3:W = "三";break;case 4:W = "四";break;case 5:W = "五";break;case 6:W = "六";break;default:break;}this.nowDate = Y + "年" + M + "月" + D + "日 ";this.nowWeek = "周" + W;this.nowTime = H + ":" + Min + ":" + S;// formatDateTime = Y + "年" + M + "月" + D + "日 " + " 周" +W + H + ":" + Min + ":" + S;},},mounted() {// 页面加载完后显示当前时间this.dealWithTime(new Date());// 定时刷新时间this.timer = setInterval(() => {this.dealWithTime(new Date()); // 修改数据date}, 500);},destroyed() {if (this.timer) {// 注意在vue实例销毁前，清除我们的定时器clearInterval(this.timer);}},};</script>

效果图