300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > vue获取当前时间并实时显示在页面

vue获取当前时间并实时显示在页面

时间:2021-10-18 14:00:30

相关推荐

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;},},

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。