vue实时显示日期时间星期几

 

 描述：页面实时展示年月日时分秒  和星期几

<template>
  <div class="header">
    <div>{{ date }} {{ week }}</div>
    <div>{{ time }}</div>
  </div>
</template>
<script>
export default {
  name: "home",
  data() {
    return {
      timer: null,
      time: "",
      date: "",
      week: "",
    };
  },
  mounted() {
    this.dateFormat();
    this.timer = setInterval(() => {
      this.dateFormat();
    }, 1000);
  },
  beforeDestroy() {
    this.dataDestroy();
  },
  methods: {
    dataDestroy() {
      if (this.timer) {
        clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
      }
    },
    dateShow() {},
    dateFormat() {
      let date = new Date();
      let year = date.getFullYear();
      let month =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      let hours =
        date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      let minutes =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      let seconds =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();

      this.date = year + "-" + month + "-" + day + " ";
      this.time = hours + ":" + minutes + ":" + seconds;
      this.week = "星期" + "日一二三四五六".charAt(date.getDay());
    },
  },
};
</script>
<style lang="scss" scoped>
.header {
  height: 85%;
  padding: 0 20px;
  font-size: 16px;
  color: #fff;
}
</style>