---

前言

在vue项目中动态显示时间，并且按日期、时间、星期一列排列。
我们想要的是下图时间显示方法。

---

一、js源代码

声明变量

  export default {
    data() {
      return {
        timer: "", //定义一个定时器
        nowTime: "",
      }
    }
  }

获取时间

      getTime() {
        this.timer = setInterval(() => {
          let timeDate = new Date();
          let year = timeDate.getFullYear();
          let mounth = timeDate.getMonth() + 1;
          let day = timeDate.getDate();
          let hours = timeDate.getHours();
          hours = hours >= 10 ? hours : "0" + hours;
          let minutes = timeDate.getMinutes();
          minutes = minutes >= 10 ? minutes : "0" + minutes;
          let seconds = timeDate.getSeconds();
          seconds = seconds >= 10 ? seconds : "0" + seconds;
          let week = timeDate.getDay();
          let weekArr = [
            "星期日",
            "星期一",
            "星期二",
            "星期三",
            "星期四",
            "星期五",
            "星期六",
          ];

 		  this.nowTime = `${year}/${mounth}/${day} ${hours}:${minutes}:${seconds} ${weekArr[week]}`
        }, 1000);
      }

其中setInterval不要忘记销毁

    beforeDestroy() {
      if (this.timer) {
        clearInterval(this.timer);
      }
    }

二、效果图

很明显我们想要的是上下结构的，输出的是一行，并不符合要求。

1.修改

修改如下：
在data中

return {
        timer: "", //定义一个定时器
        nowWeek:"", //星期
        nowDate: "", //日期
        nowTime: "", // 当前日期时间（具体到秒）
      }

在函数中

           this.nowDate = `${year}/${mounth}/${day}`;
           this.nowTime = `${hours}:${minutes}:${seconds}`;
           this.nowWeek =  `${weekArr[week]}`;
           // this.nowTime = `${year}/${mounth}/${day} ${hours}:${minutes}:${seconds} ${weekArr[week]}`

2.html与style的修改

将外部改成table，再在内部进行排序。

<template>
    <div class="outer-table">
      <div class="inner-table">
        <div>{{nowDate}}</div>
        <div>{{nowTime}}</div>
        <div>{{nowWeek}}</div>
      </div>
    </div>
</template>

  .outer-table {
    display: table;
  }
  .inner-table {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
  }

3.修改后效果图

---

总结

在vue项目中动态显示时间，并且按日期、时间、星期一列排列。