vue实现右上角时间显示实时刷新
短信预约 -IT技能 免费直播动态提醒
本文实例为大家分享了vue实现右上角时间显示实时刷新的具体代码，供大家参考，具体内容如下
效果图
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;
}
}class="lazy" data-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>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
