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

　　有时候我们需要在页面上添加一个类似时钟的东西来实时显示当前时间，这个时候我们可以利用定时器来完成这个功能

<div id="app"> {{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 }}输出的是浏览器默认的时间格式，比如"2018-10-23T02:07:09.894Z"，并非格式化时间yyyy-MM-dd hh:mm:ss，所以要注意时区。

这里有多种方法可以对时间格式化，比如赋值前先使用自定义函数处理，Vue的过滤器（filter）或计算属性（computed）也可以实现，这些以后写到。

 

 

嗯，就酱~~