How vuejs implements the date on the page
This article mainly introduces how to achieve the date of vuejs on the page, the article is very detailed, has a certain reference value, interested friends must read it!
Vuejs in the page to achieve the date of the method: 1, in data to define a variable, storage time; 2, set "{{nowTime}}"; 3, through the "timeFormate (timeStamp) {...}" method to display the current date.
This article operating environment: Windows7 system, vue2.9.6 version, DELL G3 computer.
How does vuejs implement the date on the page?
Display real-time time in vue project (year, month, day, hour, minute and second)
1. Define a variable in data to store the time
Data () {return {nowTime:''}}
two。 Given a div
{{nowTime}}
3.js part
/ / displays the current time (month, day, hour and second) timeFormate (timeStamp) {let year = new Date (timeStamp). GetFullYear (); let month = new Date (timeStamp). GetMonth () + 1 < 10? + (new Date (timeStamp). GetMonth () + 1): new Date (timeStamp). GetMonth () + 1; let date = new Date (timeStamp). GetDate () < 10? "0" + new Date (timeStamp). GetDate (): new Date (timeStamp). GetDate () Let hh = new Date (timeStamp). GetHours () < 10? "0" + new Date (timeStamp). GetHours (): new Date (timeStamp). GetHours (); let mm = new Date (timeStamp). GetMinutes () < 10? "0" + new Date (timeStamp). GetMinutes (): new Date (timeStamp). GetMinutes (); let ss = new Date (timeStamp). GetSeconds () < 10? "0" + new Date (timeStamp). GetSeconds (): new Date (timeStamp). GetSeconds () This.nowTime = year + year + month + month + date + day + hh+: "+ mm+':'+ss;}, nowTimes () {this.timeFormate (new Date ()); setInterval (this.nowTimes,1000); this.clear ()}, clear () {clearInterval (this.nowTimes) this.nowTimes = null;}
4. Copy and paste is available, mainly using timers, calling every second, and finally clearing timers and clearing functions
The above is all the content of the article "how to achieve the date of vuejs on the page". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!
