溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

Vue中怎么獲取當(dāng)前時(shí)間并實(shí)時(shí)刷新

發(fā)布時(shí)間:2020-07-27 16:50:21 來源:億速云 閱讀:390 作者:小豬 欄目:web開發(fā)

小編這次要給大家分享的是Vue中怎么獲取當(dāng)前時(shí)間并實(shí)時(shí)刷新,文章內(nèi)容豐富,感興趣的小伙伴可以來了解一下,希望大家閱讀完這篇文章之后能夠有所收獲。

1. 實(shí)現(xiàn)代碼

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

<script>
export default {
 data(){
  return {
   nowDate: "",  // 當(dāng)前日期
   nowTime: "",  // 當(dāng)前時(shí)間
   nowWeek: ""   // 當(dāng)前星期
  }
 },
 methods:{
  dealWithTime(data) { // 獲取當(dāng)前時(shí)間
   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 &#63; "0" + H : H;
   Min = Min < 10 &#63; "0" + Min : Min;
   S = S < 10 &#63; "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() { 
  // 頁(yè)面加載完后顯示當(dāng)前時(shí)間
  this.dealWithTime(new Date())
  // 定時(shí)刷新時(shí)間
  this.timer = setInterval(()=> {
    this.dealWithTime(new Date()) // 修改數(shù)據(jù)date
  }, 500)
 }, 
 destroyed() {
  if (this.timer) { // 注意在vue實(shí)例銷毀前,清除我們的定時(shí)器
   clearInterval(this.timer);
  }
 }
}
</script>

<style lang="scss" scope>

</style>

2. 實(shí)現(xiàn)效果

Vue中怎么獲取當(dāng)前時(shí)間并實(shí)時(shí)刷新

看完這篇關(guān)于Vue中怎么獲取當(dāng)前時(shí)間并實(shí)時(shí)刷新的文章,如果覺得文章內(nèi)容寫得不錯(cuò)的話,可以把它分享出去給更多人看到。

向AI問一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI