以下代码可以实现获取当前时间并实时显示,朋友们直接copy使用即可,希望可以帮助到有需要的朋友们!

<template>
  <div class="time">{{ datetimeStr }}</div>
</template>
<script>
  export default {
    data() {
      return {
        datetimeStr: '', // 显示当前时间
        formatDate: null, // 定时器}
      }
    }
    mounted() {
      this.updateDateTime();
      this.formatDate = setInterval(() => {
        this.updateDateTime();
      }, 1000);
    }
    unmounted() { // 在Vue实例销毁前,清除时间定时器
      if (this.formatDate) {
        clearInterval(this.formatDate);
      }
    }
    methods: {
      updateDateTime() { // 格式化需要展示的时间格式
        const now = new Date();
        const year = now.getFullYear();
        let month = now.getMonth() + 1;
        let day = now.getDate();
        const weekday = now.getDay();
        let hours = now.getHours();
        let minutes = now.getMinutes();
        let seconds = now.getSeconds();
        
        // 将月份和日期补零
        month = month < 10 ? '0' + month : month;
        day = day < 10 ? '0' + day : day;
        hours = hours < 10 ? '0' + hours : hours;
        minutes = minutes < 10 ? '0' + minutes : minutes;
        seconds = seconds < 10 ? '0' + seconds : seconds;
        
        // 星期数组
        const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
    
        // 格式化日期时间
        this.datetimeStr = year + "年" + month + "月" + day + "日 " + weekdays[weekday] + " " + hours + ":" + minutes + ":" + seconds;
      }
    }
  }
</script>
Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐