SoFunction
Updated on 2025-04-12

How to dynamically get the current time vue

vue dynamically gets the current time

Get the current time:

<template>
  <div >
    <span class="deadline">Deadline{{ gettime }}</span>
  </div>
</template>
 
<script>
export default {
  name: "Home",
  data() {
    return {
      gettime: "", //Current time    };
  },
 
  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(, 1000);
    },
   
  },
  mounted() {
    ();
  },
};
</script>
 
<style scoped>
</style>​

Get the current date:

<template>
  <div >
    <span class="deadline">Current date{{ sendTime }}</span>
  </div>
</template>
 
<script>
export default {
  name: "Home",
  data() {
    return {
      sendTime: "", //Current time    };
  },
  mounted() {
    ();
  },
  methods: {
      format() {
                    const nowDate = new Date();
                    const date = {
                        year: (),
                        month: () + 1,
                        date: (),
                    }
                    const newmonth =  > 9 ?  : '0' + 
                    const day =  > 9 ?  : '0' + 
                     =  + '.' + newmonth + '.' + day
 
                }, //Get the current time   
  },
};
</script>
 
<style scoped>
</style>

vue gets the current time and refreshes it at any time

Page display

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

Image upload failed! ! ! ! , I separate the year, month, day, hour, minute and second, and add style to the hour, minute and second.

2022/11/24 18:30:20

Define variables and timers in data

Put a timer in created and read the current time once a second.

Load before the timer, otherwise it will be delayed by one second

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

created() {
    ()  // If you do not call it once, the time will be displayed after the page is displayed for one second.     = setInterval(, 1000);
  },
 methods: {
    gettime() {
         = new Date().toLocaleString('zh', { year: 'numeric', month: 'numeric', day: 'numeric' })
         = new Date().toLocaleString('zh', { hour: 'numeric', minute: 'numeric', second: 'numeric' })
    }
  },

Finally destroyed

beforeDestroy () {
    if ( &amp;&amp; ) {
      clearInterval(, ) // Clear the timer before the Vue instance is destroyed    }
  }

Summarize

The above is personal experience. I hope you can give you a reference and I hope you can support me more.