vue获取当前时间组件

最新推荐文章于 2024-08-13 08:05:13 发布

前端-文龙刚

最新推荐文章于 2024-08-13 08:05:13 发布

阅读量588

点赞数

分类专栏： Vue 文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/qq_17211063/article/details/127279805

版权

Vue 专栏收录该内容

98 篇文章 2 订阅

订阅专栏

<template>
    <div class="hello">
      <span class="datetime">{{ nowDate }}</span>
    </div>
  </template>
  
  <script>
  export default {
    name: 'HelloWorld',
    data () {
      return {
        nowDate: 'time' // 当前时间
      }
    },
    mounted () {
      this.currentTime()
    },
    methods: {
      currentTime () {
        setInterval(this.formatDate, 500);
      },
      formatDate () {
        let date = new Date();
        let year = date.getFullYear(); // 年
        let month = date.getMonth() + 1; // 月
        let day = date.getDate(); // 日
        let week = date.getDay(); // 星期
        let weekArr = [
          "星期日",
          "星期一",
          "星期二",
          "星期三",
          "星期四",
          "星期五",
          "星期六",
        ];
        let hour = date.getHours(); // 时
        hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
        let minute = date.getMinutes(); // 分
        minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
        let second = date.getSeconds(); // 秒
        second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
        this.nowDate = `${year}/${month}/${day} ${hour}:${minute}:${second} ${weekArr[week]}`;
      },
    }
  }
  </script>
  
  <style scoped>
  .datetime {
      font-size: 32px;
  }
  </style>