vue 获取当前时间，实现时时刷新

//著名转载自他人，非原创

<template>
  <div>
    {{nowDate}}{{nowWeek}}
    <div>

      {{nowTime}}

    </div>
  </div>
</template>

<script>
  export default {

    name:"signIn",

    data(){
      return {
        nowDate: "",  // 当前日期
        nowTime: "",  // 当前时间
        nowWeek: ""   // 当前星期
      }
    },
    methods:{
      dealWithTime(data) { // 获取当前时间
        let formatDateTime;
        let Y = data.getFullYear();
        let M = data.getMonth() + 1;
        let D = data.getDate();
        let H = data.getHours();
        let Min = data.getMinutes();
        let S = data.getSeconds();
        let W = data.getDay();
        H = H < 10 ? "0" + H : H;
        Min = Min < 10 ? "0" + Min : Min;
        S = S < 10 ? "0" + S : S;
        switch (W) {
          case 0:
            W = "日";
            break;
          case 1:
            W = "一";
            break;
          case 2:
            W = "二";
            break;
          case 3:
            W = "三";
            break;
          case 4:
            W = "四";
            break;
          case 5:
            W = "五";
            break;
          case 6:
            W = "六";
            break;
          default:
            break;
        }
        this.nowDate = Y + "年" + M + "月" + D + "日 ";
        this.nowWeek = "周" + W ;
        this.nowTime = H + ":" + Min + ":" + S;
        // formatDateTime = Y + "年" + M + "月" + D + "日 " + " 周" +W + H + ":" + Min + ":" + S;
      },
    },
    mounted() {
      // 页面加载完后显示当前时间
      this.dealWithTime(new Date())
      // 定时刷新时间
      this.timer = setInterval(()=> {
        this.dealWithTime(new Date()) // 修改数据date
      }, 500)
    },
    destroyed() {
      if (this.timer) { // 注意在vue实例销毁前，清除我们的定时器
        clearInterval(this.timer);
      }
    }
  }
</script>

<style lang="scss" scope>

</style>

 

小码助力平台致力于为初入职场的IT小白，

解决工作中遇到的工作难题。

节约无效搜索时间，助力渡过试用期。

目前开放的技术领域（web前端+java）

如您有需要，欢迎联系我们 。

微信：18062748486

如加微信，请备注“IT问题解决”