vue获取当前时间并实时显示在页面
获取当前时间,并动态显示在页面上
·
在需要显示的地方加上这行,可以根据自己的需求修改
<div><span>当前时间: {{newTime}} </span></div>
在data里面定义
data() {
return {
newTime: ""
}
}
在mouted里加入以下代码
mounted(){
this.getNowTime();//进入页面调用该方法获取当前时间
clearInterval(myTimeDisplay );//销毁之前定时器
var myTimeDisplay = setInterval(() => {
this.getNowTime(); //每秒更新一次时间
}, 1000);
},
最后再methods去写该方法
methods: {
getNowTime() {
var date = new Date();
var time = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();
this.newTime = time;
},
//根据自己的需求,看要不要在时间不大于10的时候在前面补0,如果需要直接this.addZero(date.getMinutes()),其它与之相同,如果不需要删掉addZero()方法即可。
//小于10的拼接上0字符串
addZero(s) {
return s < 10 ? ('0' + s) : s;
},
},
更多推荐
已为社区贡献1条内容
所有评论(0)