vue實(shí)現(xiàn)右上角時(shí)間顯示實(shí)時(shí)刷新
本文實(shí)例為大家分享了vue實(shí)現(xiàn)右上角時(shí)間顯示實(shí)時(shí)刷新的具體代碼,供大家參考,具體內(nèi)容如下
效果圖

utils文件夾下的index.js
export default {
// 獲取右上角的時(shí)間戳
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)前時(shí)間
}
},
methods:{
// 刷新頭部時(shí)間
refreashCurrentTime(){
this.currentDate = utils.formatDate(new Date())
}
},
mounted(){
// 定時(shí)刷新時(shí)間
this.currentDateTimer = setInterval(this.refreashCurrentTime,1000)
}
}
</script>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue項(xiàng)目常用組件和框架結(jié)構(gòu)介紹
這篇文章通過圖文形式給大家介紹了vue項(xiàng)目的骨架及常用組件的相關(guān)知識(shí),對(duì)此有興趣的朋友跟著小編一起學(xué)習(xí)參考下吧。2017-12-12
Vue如何實(shí)現(xiàn)利用vuex永久儲(chǔ)存數(shù)據(jù)
這篇文章主要介紹了Vue如何實(shí)現(xiàn)利用vuex永久儲(chǔ)存數(shù)據(jù)問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-04-04
Vue中使用 Echarts5.0 遇到的一些問題(vue-cli 下開發(fā))
這篇文章主要介紹了Vue中使用 Echarts5.0 遇到的一些問題(vue-cli 下開發(fā)),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10
vue.js出現(xiàn)Vue.js?not?detected錯(cuò)誤的解決方案
這篇文章主要介紹了vue.js出現(xiàn)Vue.js?not?detected錯(cuò)誤的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09

