基于Vue实时显示当前时间

Vue页面上实时显示当前时间，每秒更新

方法一、 利用定时器来完成

<div>
	{{date}}
</div>

<script>
export default {
  data() {
    return {
      date: new Date()
    };
  },
  mounted() {
    let _this = this; // 声明一个变量指向Vue实例this，保证作用域一致
    this.timer = setInterval(() => {
      _this.date = new Date(); // 修改数据date
    }, 1000)
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
    }
  }
};
</script>

这里的{{ date }}输出的是浏览器默认的时间格式，还需要对时间进行格式化，比如赋值前先使用自定义函数处理，Vue的过滤器（filter）或计算属性（computed）也可以实现。

方法二、

1. 在data中定义一个字符串，用于保存时间

data () {
    return {
      nowTime: ''
    }
  }

2. 在methods钩子函数中定义三个函数

timeFormate (timeStamp) {
      let year = new Date(timeStamp).getFullYear()
      let month = new Date(timeStamp).getMonth() + 1 < 10 ? '0' + (new Date(timeStamp).getMonth() + 1) : new Date(timeStamp).getMonth() + 1
      let date = new Date(timeStamp).getDate() < 10 ? '0' + new Date(timeStamp).getDate() : new Date(timeStamp).getDate()
      let hh = new Date(timeStamp).getHours() < 10 ? '0' + new Date(timeStamp).getHours() : new Date(timeStamp).getHours()
      let mm = new Date(timeStamp).getMinutes() < 10 ? '0' + new Date(timeStamp).getMinutes() : new Date(timeStamp).getMinutes()
      let ss = new Date(timeStamp).getSeconds() < 10 ? '0' + new Date(timeStamp).getSeconds() : new Date(timeStamp).getSeconds()
      let week = new Date(timeStamp).getDay()
      let weeks = ['日', '一', '二', '三', '四', '五', '六']
      let getWeek = '星期' + weeks[week]
      this.nowTime = year + '年' + month + '月' + date + '日' + ' ' + hh + ':' + mm + ':' + ss + getWeek
    }, // 实时刷新当前时间，格式化
    nowTimes () {
      this.timeFormate(new Date())
      setInterval(this.nowTimes, 1000)
      this.clear()
    },
    clear () {
      clearInterval(this.nowTimes)
      this.nowTimes = null
    }

3. 在mounted钩子函数中调用nowTimes函数，在beforeDestroy钩子函数中调用clear函数

mounted () {
    this.nowTimes()
  },
  beforeDestroy () {
    this.clear()
  }

4. 显示在界面上

<div>
	{{nowTime}}
</div>

以上都是看别人的博客所记录下来的，为了自己方便查看使用，若是侵权，请告诉我，我会把这篇文章设置为私密或者删除，谢谢——一个继续向前，永不言弃的菜鸟留言
方法一借鉴笔记地址
方法二借鉴笔记地址