Vue + dateformat.js 实时显示时间,时间自动更新。

需求:获取当前系统时间,在页面上展示 年 月 日 ,并且实时刷新,和系统时间保持一致。

如果是cli项目:

npm install --save dateformat

main.js:

import dateFormat from 'dateformat'
Vue.prototype.$dateFormat = dateFormat
第一步:在deta 里面声明两个变量
第二步:把时间调用写在created() 生命周期里面,进入页面就需要调用
第三步:离开页面使用beforeDestroy() 销毁

如下:

data() {
    return {
      timer: "", // 定义一个定时器的变量
      currentTime: this.$dateFormat(new Date(), 'yyyy-mm-dd H:MM:ss')
    }
  },
  created() {
    this.timer = setInterval(() => {
      this.currentTime = this.$dateFormat(new Date(), 'yyyy-mm-dd H:MM:ss')
    }, 1000)
  },
  beforeDestroy() {
     this.timer && clearInterval(this.timer) // 在Vue实例销毁前,清除我们的定时器
  }

这样就能满足需求了 拿到的时间格式是 2020-3-02 15:22: 5

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 13,805评论 1 32
  • feisky云计算、虚拟化与Linux技术笔记posts - 1014, comments - 298, trac...
    不排版阅读 9,348评论 0 5
  • 目录 - 3.1 vue中子组件调用父组件的方法 - 3.2 Vue父组件调用子组件的方法 - 3.3 涉及到组件...
    我跟你蒋阅读 3,982评论 0 10
  • vue面试题 转自https://www.jianshu.com/p/2ed9f54a3ff2 一、Vue.js介...
    zhcnnet阅读 4,826评论 0 22
  • 1. Vue.js介绍 Vue.js是一个轻巧、高性能、可组件化的MVVM库,同时拥有非常容易上手的API; V...
    tyu229阅读 32,695评论 1 26