vue实现获取当前时间并实时显示

以下代码可以实现获取当前时间并实时显示，朋友们直接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>

原文地址：https://blog.csdn.net/m0_67460846/article/details/142754869

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！