实现效果:
- html展示时间
- data中定义数据
- 在created里设置定时器,重置时间格式
- 在methods里写过滤小于10 的时候前面加0的方法
-
在Vue实例销毁前,清除定时器
<div> <span>{{currentTime}}</span> </div> data() { return{ timer: "",//定义一个定时器的变量 currentTime: new Date(), // 获取当前时间 } }, created() { var vm = this; vm.timer = setInterval(() => { var y = new Date().getFullYear(); var m = vm.appendZero(new Date().getMonth() + 1); var d = vm.appendZero(new Date().getDate()); var ho = vm.appendZero(new Date().getHours()); var mi = vm.appendZero(new Date().getMinutes()); //修改数据date vm.currentTime = y + "/" + m + '/' + d + ' ' + ho + ':' + mi; }, 1000); }, methods: { //时间过滤加0 appendZero(obj) { if (obj < 10) { return "0" + obj; } else { return obj; } }, }, beforeDestroy() { if (this.timer) { clearInterval(this.timer); // 在Vue实例销毁前,清除我们的定时器 } }