vue中动态显示时间

原创

已于 2024-03-20 09:40:23 修改 · 628 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2024-03-20 09:22:45 首次发布

本文介绍了一个Vue组件，展示了如何使用JavaScript实现页面上实时更新的时间显示，并提供了日期时间格式化的函数，确保了小时、分钟等始终是两位数格式。

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

我也是参考别人的。

代码如下

export default {
  name: 'Preview',
  data() {
    return {
      timer: undefined,
      nowTime: new Date(),
    };
  },
  created() {
    // 要显示时间，在渲染页面之前一直调用该函数，对this.time进行赋值开启定时
    this.timer = setInterval(() => {
      //时间格式1
      //this.nowTime = new Date().toLocaleString();
      
      //时间格式2
      this.nowTime = this.FormatTime();
    });
  },

  // 关闭页面销毁定时器
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },

  methods: {
    FormatTime() {
        //设置返回显示的日期时间格式
        var date    = new Date();
        var year    = this.format2Digit(date.getFullYear());
        var month   = this.format2Digit(date.getMonth() + 1);
        var day     = this.format2Digit(date.getDate());
        var hour    = this.format2Digit(date.getHours());
        var minute  = this.format2Digit(date.getMinutes());
        var second  = this.format2Digit(date.getSeconds());
        var weekday = date.get