vue实现右上角时间显示实时刷新
更新时间:2021年10月21日 17:03:17 作者:海绵宝宝y
这篇文章主要为大家详细介绍了vue实现右上角时间显示实时刷新,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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; } }
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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
Vue中使用 Echarts5.0 遇到的一些问题(vue-cli 下开发)
这篇文章主要介绍了Vue中使用 Echarts5.0 遇到的一些问题(vue-cli 下开发),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-10-10vue.js出现Vue.js not detected错误的解决方案
这篇文章主要介绍了vue.js出现Vue.js not detected错误的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-09-09
最新评论