Vue如何獲取當前時間

第一種方式：

- 代碼如下：

<template>
    <div id="homeHeader" class="clearfix">     
      <div class="nav clearfix" >  
          當前時間是：<a class="datastyle txt">{{date | formatDateTime}}</a>          
      </div>
    </div>
  </template>
   
  <script>
   
  export default {
    name: "homeHeader",
    data() {
      return {
        date: new Date(),      
      };
    },
    filters: {
      formatDateTime(value) {
        let date = new Date(value);
        let y = date.getFullYear();
        let MM = date.getMonth() + 1;
        MM = MM < 10 ? "0" + MM : MM;
        let d = date.getDate();
        d = d < 10 ? "0" + d : d;
        let h = date.getHours();
        h = h < 10 ? "0" + h : h;
        let m = date.getMinutes();
        m = m < 10 ? "0" + m : m;
        let s = date.getSeconds();
        s = s < 10 ? "0" + s : s;
        return y + "-" + MM + "-" + d + " " + h + ":" + m + ":" + s;
      }
    },
    mounted() {
      var that = this;
      this.timer = setInterval(() => {
        that.date = new Date(); //修改數據date
      }, 1000);
    },
    beforeDestroy() {
      if (this.timer) {
        clearInterval(this.timer); //在Vue實例銷燬前，清除我們的定時器
      }
    }, 
   
  };
  </script>
    

• 根據項目的中的需求，可以自行改動

原文參考

-------------------------------------------------------------------------------------------------------------------------------

第二種方式：

• 代碼如下：

<template>
    <div class="header-file">
        <el-header class="header">
            <div>
                {{ nowDate + ' ' + nowTime + ' ' + nowWeek }}
            </div>
        </el-header>
    </div>
</template>

<script>
export default {
    data() {
        return {
            nowDate: "",    // 當前日期
            nowTime: "",    // 當前時間
            nowWeek: ""     // 當前星期
        };
    },
    methods: {
        currentTime() {
            setInterval(this.getDate, 500);
        },
        getDate: function() {
            var _this = this;
            let yy = new Date().getFullYear();
            let mm = new Date().getMonth() + 1;
            let dd = new Date().getDate();
            let week = new Date().getDay();
            let hh = new Date().getHours();
            let mf =
                new Date().getMinutes() < 10
                    ? "0" + new Date().getMinutes()
                    : new Date().getMinutes();
            if (week == 1) {
                this.nowWeek = "星期一";
            } else if (week == 2) {
                this.nowWeek = "星期二";
            } else if (week == 3) {
                this.nowWeek = "星期三";
            } else if (week == 4) {
                this.nowWeek = "星期四";
            } else if (week == 5) {
                this.nowWeek = "星期五";
            } else if (week == 6) {
                this.nowWeek = "星期六";
            } else {
                this.nowWeek = "星期日";
            }
            _this.nowTime = hh + ":" + mf;
            _this.nowDate = yy + "-" + mm + "-" + dd;
        }
    },
    mounted() {
        this.currentTime();
    },
    // 銷燬定時器
    beforeDestroy: function() {
        if (this.getDate) {
            console.log("銷燬定時器")
            clearInterval(this.getDate); // 在Vue實例銷燬前，清除時間定時器
        }
    }
};
</script>

原文參考