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 ( && ) { 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.