vue實現(xiàn)右上角時間顯示實時刷新
更新時間:2021年10月21日 17:03:17 作者:海綿寶寶y
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)右上角時間顯示實時刷新,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue實現(xiàn)右上角時間顯示實時刷新的具體代碼,供大家參考,具體內(nèi)容如下
效果圖
utils文件夾下的index.js
export default { // 獲取右上角的時間戳 formatDate(time) { let newTime = ""; let date = new Date(time); let a = new Array("日","一","二","三","四","五","六"); let year = date.getFullYear(), month = date.getMonth()+1,//月份是從0開始 day = date.getDate(), hour = date.getHours(), min = date.getMinutes(), sec = date.getSeconds(), week = new Date().getDay(); if(hour<10){ hour = "0"+hour; } if(min<10){ min="0"+min; } if(sec<10){ sec = "0"+sec; } newTime = year + "-"+month+"-" +day +" 星期"+a[week] + " "+hour+":"+min+":"+sec; return newTime; } }
src==>page文件夾下cs.vue
<template> <div class="main"> <!-- 頭部 --> <div class="header"> <div class="cue_time">{{currentDate}}</div> </div> </div> </template> <script> import utils from '../utils/index' export default { name:"tranin", data () { return{ currentDate: utils.formatDate(new Date()), currentDateTimer:null,//頭部當(dāng)前時間 } }, methods:{ // 刷新頭部時間 refreashCurrentTime(){ this.currentDate = utils.formatDate(new Date()) } }, mounted(){ // 定時刷新時間 this.currentDateTimer = setInterval(this.refreashCurrentTime,1000) } } </script>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Vue如何實現(xiàn)利用vuex永久儲存數(shù)據(jù)
這篇文章主要介紹了Vue如何實現(xiàn)利用vuex永久儲存數(shù)據(jù)問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-04-04Vue中使用 Echarts5.0 遇到的一些問題(vue-cli 下開發(fā))
這篇文章主要介紹了Vue中使用 Echarts5.0 遇到的一些問題(vue-cli 下開發(fā)),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-10-10vue.js出現(xiàn)Vue.js?not?detected錯誤的解決方案
這篇文章主要介紹了vue.js出現(xiàn)Vue.js?not?detected錯誤的解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-09-09