这篇文章主要介绍“vue框架中如何实现时间实时刷新的功能，代码是什么”的相关知识，下面会通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“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框架中如何实现时间实时刷新的功能，代码是什么"的内容，大家可以关注群英网络的其它相关文章。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• jQuery中怎么样删除元素内容，方法是什么？

  这篇文章给大家分享的是jQuery中怎么样删除元素内容的方法，文中给大家分享了两个方法，分别是利用children()和remove()方法、empty()方法，文中的示例代码介绍得很详细，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。

• JavaScript迭代是什么意思，用于解决什么问题

  循环是迭代机制的基础，可以指定迭代的次数和每次迭代要执行的动作。迭代是在有序集合上进行的，有序可以理解为集合中的所有项目按确定的顺序被遍历。

• JavaScript类型检测方法是什么，具体怎样做

  JavaScript是web前端广泛应用的语言之一，在网页应用制作、脚本制作、小程序等诸多领域具有不可替代的的地位。笔者学习了一端时间的前端，颇感JS知识点的繁碎，故将学习到的一些知识、思考和感悟记录下来。

• Node.js的子进程如何理解，实例是怎样

  本文详细讲解了Node.js进程管理之子进程，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

• JS深拷贝的实现是怎样，深拷贝是否完善看哪些

  网上有很多关于深拷贝的文章，但是质量良莠不齐，有很多都考虑得不周到，写的方法比较简陋，难以令人满意。本文旨在完成一个完美的深拷贝，大家看了如果有问题，欢迎一起补充完善。