快捷導(dǎo)航

vue如何動(dòng)態(tài)獲取當(dāng)前時(shí)間

更新時(shí)間：2023年12月02日 14:52:26 作者：性野喜悲

這篇文章主要介紹了vue如何動(dòng)態(tài)獲取當(dāng)前時(shí)間問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue動(dòng)態(tài)獲取當(dāng)前時(shí)間

獲取當(dāng)前時(shí)間：

<template>
  <div id="home">
    <span class="deadline">截止{{ gettime }}</span>
  </div>
</template>
 
<script>
export default {
  name: "Home",
  data() {
    return {
      gettime: "", //當(dāng)前時(shí)間
    };
  },
 
  methods: {
    getTime() {
    var _this = this;
      let yy = new Date().getFullYear();
      var mm =
        new Date().getMonth() > 9
          ? new Date().getMonth() + 1
          : new Date().getMonth() == 9
          ? new Date().getMonth() + 1
          : '0' + (new Date().getMonth() + 1);
      var dd = new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date().getDate();
      let hh = new Date().getHours();
      let mf =
        new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes();
      let ss =
        new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds();
      _this.gettime = yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf + ':' + ss;
    },
    currentTime() {
      setInterval(this.getTime, 1000);
    },
   
  },
  mounted() {
    this.currentTime();
  },
};
</script>
 
<style scoped>
</style>?

獲取當(dāng)前日期：

<template>
  <div id="home">
    <span class="deadline">當(dāng)前日期{{ sendTime }}</span>
  </div>
</template>
 
<script>
export default {
  name: "Home",
  data() {
    return {
      sendTime: "", //當(dāng)前時(shí)間
    };
  },
  mounted() {
    this.format();
  },
  methods: {
      format() {
                    const nowDate = new Date();
                    const date = {
                        year: nowDate.getFullYear(),
                        month: nowDate.getMonth() + 1,
                        date: nowDate.getDate(),
                    }
                    const newmonth = date.month > 9 ? date.month : '0' + date.month
                    const day = date.date > 9 ? date.date : '0' + date.date
                    this.sendTime = date.year + '.' + newmonth + '.' + day
 
                }, //獲取當(dāng)前時(shí)間
   
  },
};
</script>
 
<style scoped>
</style>

vue獲取當(dāng)前時(shí)間并時(shí)時(shí)刷新

頁(yè)面顯示

<div><span>{{nowDate}}</span><span class="houertime">{{hourDate}}</span></div>

圖片上傳失敗?。。?！，我是分開(kāi)年月日和時(shí)分秒，給時(shí)分秒加樣式

2022/11/24 18:30:20

data中定義變量和定時(shí)器

在created中放一個(gè)定時(shí)器，每秒讀取當(dāng)前時(shí)間一次，

在定時(shí)器之前先加載，否則會(huì)延遲一秒

data(){
    return {
          nowDate: null,
          hourDate: null,
          nowtimer: ''
    }
},

created() {
    this.gettime()  // 如果不先調(diào)用一次的話，頁(yè)面顯示一秒后，時(shí)間才會(huì)顯示
    this.nowtimer = setInterval(this.gettime, 1000);
  },
 methods: {
    gettime() {
        this.nowDate = new Date().toLocaleString('zh', { year: 'numeric', month: 'numeric', day: 'numeric' })
        this.hourDate = new Date().toLocaleString('zh', { hour: 'numeric', minute: 'numeric', second: 'numeric' })
    }
  },

最后進(jìn)行銷(xiāo)毀

beforeDestroy () {
    if (this.nowDate && this.hourDate) {
      clearInterval(this.nowDate, this.hourDate) // 在Vue實(shí)例銷(xiāo)毀前，清除定時(shí)器
    }
  }