本文例項為大家分享了實現右上角時間顯示實時重新整理的具體程式碼，供大家參考，具體內容如下

效果圖

utils資料夾下的index.

export default {
  // 獲取右上角的時間戳
  formatDate(time) {
    let  newTime = "";
    let date = new Date(time);
    let a = new Array("日","一","二","三","四","五","六");
    let year = date.getFullYear(),month = date.getMonth()+1,//月份是從0開始
        day = date.getDate(),hour = date.getHours(),min = date.getMinutes(),sec = date.getSeconds(),week = new Date().getDay();
        if(hour<10){
          hour = "0"+hour;
        }
        if(min<10){
  ArSyoaJG
 
        min="0"+min;
        }
        if(sec<10){
          sec = "0"+sec;
        }
    newTime = year + "-"+month+"-" +day +"  星期"+a[week] + " "+hour+":"+min+":"+sec;
    return newTime;
  }
}

src==>page資料夾下cs.vue

<template>
  <div class="main"> www.cppcns.com  
    <!-- 頭部 -->
    <div class="header">     
      <div class="cue_time">{{currentDate}}</div>
    </div>
  </div>
</template>
 
<script>
  import utils from '../utils/index' 
  ewww.cppcns.com
 
xport default {
    name:"tranin",data () {
      return{       
        currentDate: utils.formatDate(new Date()),currentDateTimer:null,//頭部當前時間
      }
      
    },methods:{
      // 重新整理頭部時間
      refreashCurrentTime(){
        this.currentDate = utils.formatDate(new Date())
      }
 
    },mounted(){
      // 定時重新整理時間
      this.currentDateTimer = setInterval(this.refreashCurrentTime,1000)
 
    }
  }
&http://www.cppcns.com
 
lt;/script>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。