---

前言

在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项目中动态显示时间，并且按日期、时间、星期一列排列。