在data中定义一个变量,来存储时间:
data() {
return {
newTime: "",
};
},
在页面中写一个盒子用来装日期的数据:
<div>
<div>{{ newTime }}</div>
</div>
在进入页面时(mounted中)更新显示最新时间,之后每隔一秒变化一次时间:
mounted() {
this.getNowTime(); //进入页面调用该方法获取当前时间
clearInterval(myTimeDisplay); //销毁之前的定时器
var myTimeDisplay = setInterval(() => {
this.getNowTime(); //每隔一秒会再次更新时间
}, 1000);
},
在metheds中编写具体时间变化代码:
methods: {
// 获取当前时间
getNowTime() {
var _this = this;
let yy = new Date().getFullYear();
let mm =
new Date().getMonth() + 1 < 10
? "0" + new Date().getMonth() + 1
: new Date().getMonth() + 1;
let dd =
new Date().getDate() < 10
? "0" + new Date().getDate()
: new Date().getDate();
let hh =
new Date().getHours() < 10
? "0" + new Date().getHours()
: new Date().getHours();
let mf =
new Date().getMinutes() < 10
? "0" + new Date().getMinutes()
: new Date().getMinutes();
let ss =
new Date().getSeconds() < 10
? "0" + new Date().getSeconds()
: new Date().getSeconds();
_this.newTime =
yy + "年" + mm + "月" + dd + "日" + hh + "时" + mf + "分" + ss + "秒";
},
},
在页面中显示的结果: