vue数据大屏开发经常会遇到像下图一样要显示当前日期，有的项目只显示年月日，有的项目显示年月日时分秒，有的项目显示星期 年月日时分秒等，很多情况。今天介绍vue数据大屏添加日期和时间实现的方法。

效果演示

数据大屏日期和时间实时更新的效果演示

安装依赖

使用前需要先安装日期插件，常用的有moment 和 dayjs 这两种，这里推荐dayjs，moment与Dayjs的区别除了文件大小外，其他api基本一致，dayjs相对小很多。然后进行组件封装，将其封装为一个组件或者是一个模板，就可以在后期根据需要微调一下样式进行复用了。
安装依赖推荐pnpm，如果对pnpm感兴趣想了解其和npm的差异可以查看pnpm的安装与使用了解一下。

pnpm i dayjs 

实现代码

<template>
  <div class="dateTime">
    <span>星期{{ week }}</span> {{ date }} <span>{{ time }}</span>
  </div>
</template>

<script>
import dayjs from 'dayjs'

export default {
  name: "dayTime",
  components: {},
  data() {
    return {
      date: dayjs().format("YYYY-MM-DD"),
      time: dayjs().format("HH:mm:ss"),
    }
  },
  computed: {
    week() {
      var datas = dayjs().day()
      var week = ['日', '一', '二', '三', '四', '五', '六']
      return week[datas]
    }
  },
  mounted() {
    var that = this;
    setInterval(function () {
      that.time = dayjs().format("HH:mm:ss");
    }, 1000);
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.dateTime {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;
  font-size: 12px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #FFFFFF;
  span {
    margin-left: 5px;
    margin-right: 5px;
  }
}
</style>