vue日期时间星期显示再页面

<template>

  <!-- 时间条 总区域-->

  <div class="time">

    <!-- 时间 左边 -->

    <div class="time-l">

      <div>今天是</div>

      <div>{{nowDate}}&nbsp;&nbsp;</div>

      <div>{{nowTime}}&nbsp;&nbsp;</div>

      <div>{{nowWeek}}</div>

    </div>

    <!-- 时间 右边 -->

    <div class="time-r"></div>

  </div>

</template>

<script>

export default {

  data() {

    return {

      // 时间变量

      timer: null,

      nowWeek: "",

      nowDate: "",

      nowTime: "",

    };

  },

  mounted() {

    // 调用时间方法

    this.timer = setInterval(() => {

      this.setNowTimes();

    }, 1000);

  },

  methods: {

    setNowTimes() {

      //获取当前时间

      let myDate = new Date();

      let wk = myDate.getDay();

      let yy = String(myDate.getFullYear());

      let mm = myDate.getMonth() + 1;

      let dd = String(

        myDate.getDate() < 10 ? "0" + myDate.getDate() : myDate.getDate()

      );

      let hou = String(

        myDate.getHours() < 10 ? "0" + myDate.getHours() : myDate.getHours()

      );

      let min = String(

        myDate.getMinutes() < 10

          ? "0" + myDate.getMinutes()

          : myDate.getMinutes()

      );

      let sec = String(

        myDate.getSeconds() < 10

          ? "0" + myDate.getSeconds()

          : myDate.getSeconds()

      );

      let weeks = [

        "星期日",

        "星期一",

        "星期二",

        "星期三",

        "星期四",

        "星期五",

        "星期六",

      ];

      let week = weeks[wk];

      this.nowDate = yy + "年" + mm + "月" + dd + '日';

      this.nowTime = hou + ":" + min + ":" + sec;

      this.nowWeek = week;

    },

  },

};

</script>

<style lang="scss" scoped>

// 时间 总区域

.time {

  width: 100%;

  height: 50px;

  //   background-color: #124daf;

  background-color: rgba(#124daf, 0.9);

  // 时间左边

  .time-l {

    width: 50%;

    height: 100%;

    font-size: 14px;

    color: #ffffff;

    display: flex;

    align-items: center;

    justify-content: center;

  }

  // 时间右边

  .time-r {

    width: 50%;

    height: 100%;

  }

}

</style>