vue實現(xiàn)右上角時間顯示實時刷新
更新時間:2021年10月21日 17:03:17 作者:海綿寶寶y
這篇文章主要為大家詳細介紹了vue實現(xiàn)右上角時間顯示實時刷新,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了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,//頭部當前時間
}
},
methods:{
// 刷新頭部時間
refreashCurrentTime(){
this.currentDate = utils.formatDate(new Date())
}
},
mounted(){
// 定時刷新時間
this.currentDateTimer = setInterval(this.refreashCurrentTime,1000)
}
}
</script>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue.js實現(xiàn)插入數(shù)值與表達式的方法分析
這篇文章主要介紹了vue.js實現(xiàn)插入數(shù)值與表達式的方法,結(jié)合實例形式分析了vue.js常見的3種插入數(shù)值實現(xiàn)方式,并總結(jié)了vue.js插值與表達式相關(guān)使用技巧,需要的朋友可以參考下2018-07-07
Vue2響應(yīng)式系統(tǒng)之set和delete
這篇文章主要介紹了Vue2響應(yīng)式系統(tǒng)之set和delete,通過為對象收集依賴,將對象、數(shù)組的修改、刪除也變成響應(yīng)式的了,同時為用戶提供了和方法,下文詳細介紹需要的朋友可以參考一下2022-04-04
使用vuex緩存數(shù)據(jù)并優(yōu)化自己的vuex-cache
這篇文章主要介紹了使用vuex緩存數(shù)據(jù)并優(yōu)化自己的vuex-cache,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
vue項目中如何使用video.js實現(xiàn)視頻播放與視頻進度條打點
這篇文章主要給大家介紹了關(guān)于vue項目中如何使用video.js實現(xiàn)視頻播放與視頻進度條打點的相關(guān)資料,video.js是一款基于HTML5的網(wǎng)絡(luò)視頻播放器,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-12-12

