vue实现当前时间动态显示

最新推荐文章于 2025-04-17 09:51:41 发布

原创最新推荐文章于 2025-04-17 09:51:41 发布 · 1.6w 阅读

46 ·

CC 4.0 BY-SA版权

文章标签：

#vue

elementui 同时被 2 个专栏收录

5 篇文章

订阅专栏

vue

3 篇文章

订阅专栏

本文介绍了在Vue.js应用中如何实时显示并格式化当前时间。通过使用`created`和`mounted`生命周期钩子，结合定时器实现时间的实时更新。同时，展示了如何在组件中创建一个方法`dateFormat`，用于将日期转换为指定格式，例如'年月日小时:分钟:秒星期'。最终，时间将在界面上以格式化的形式动态展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如图所示：
在这里插入图片描述

1.直接返回定义的时间

<template>
    <!-- 注意： link 不能使用，因为它是内置的标签
       你要使用另外一个名称就行了，一般加上一个前缀
     -->
     <div>
     	<el-button >
            <span>{{newDate}}</span>
        </el-button>
     </div>
</template>

2.然后就是需要挂载时间

注：这里是vue的生命周期，生命周期函数图示链接为 https://cn.vuejs.org/v2/guide/instance.html#生命周期图示
created( ) 与 mounted( )的区别就是：
created 在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图
mounted在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

data() {
	retrun{
		// 当前时间
     	newDate: new Date()
	}
},
// 挂载时间
mounted () {
    let that = this
    this.timer = setInterval(function () {
      that.newDate = new Date().toLocaleString()
    })
},
// 销毁时清除计时器
beforeDestroy: function () {
    if (this.timer) {
      clearInterval(this.timer)
    }
}，

this.timer即为定时器
做到这里时间就可以显示了
如图：
在这里插入图片描述

3.我们可以对时间进行格式化：

按钮改为需要调用格式的方法即可

<el-button >
      <span>{{dateFormat(newDate)}}</span>
</el-button>

对时间进行格式处理

methods: {
	// 时间格式化
    dateFormat () {
    	var date = new Date()
        var year = date.getFullYear()
        /* 
         * 在日期格式中，月份是从0开始的
         * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
         * /
        var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
        var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
        var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
        var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
        var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
        let week = date.getDay() // 星期
        let weekArr = [ '星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六' ]
        // 拼接 时间格式处理
        return year + '年' + month + '月' + day + '日 ' + hours + ':' + minutes + ':' + seconds + ' ' + weekArr[week]
    }
}

效果如图所示：
在这里插入图片描述