vue 实时时间

<template>
    <div class="dateTime">当前时间: {{ nowDate }}</div>
  </template>
  
  <script>
  export default {
    name: "realTime",
    created() {
      this.currentTime();
    },
    data() {
      return {
        nowDate: "",
      };
    },
    methods: {
      //获取当前时间
      getDate() {
        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]}`;
      },
  
      //定时器调取当前时间
      currentTime() {
        setInterval(() => {
          this.getDate();
        }, 1000);
      },
    },
  };
  </script>
  
  <style scoped>
  .dateTime {
    width: 500px;
    height: 100px;
    font-size: 20px;
    font-weight: bold;
  }
  </style>