做大屏页面的时候要求在页面上加上当前时间,实现此功能的写法有很多种,我的源码如下,各位拿了直接用就行(根据自己的需求修改下样式):
<template>
<div style="text-align: center;padding-top: 100px">
当前时间:{{ nowTime }}
</div>
</template>
<script>
export default {
data() {
return {
nowTime: ''
};
},
mounted() {
this.getNowTime();
},
methods: {
getNowTime () {
let speed = 1000
let that = this
let theNowTime = function () {
that.nowTime = that.timeNumber()
}
setInterval(theNowTime, speed)
},
timeNumber () {
let today = new Date()
let date = today.getFullYear() + '-' + this.twoDigits(today.getMonth() + 1) + '-' + this.twoDigits(today.getDate())
let time = this.twoDigits(today.getHours()) + ':' + this.twoDigits(today.getMinutes()) + ':' + this.twoDigits(today.getSeconds())
return date + ' ' + time
},
twoDigits (val) {
if (val < 10) return '0' + val
return val
},
},
}
</script>
页面效果:
文章来源:https://www.toymoban.com/news/detail-509920.html
文章来源地址https://www.toymoban.com/news/detail-509920.html
到了这里,关于VUE实时显示当前时间的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!