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)也可以实现。
方法二、
- 在data中定义一个字符串,用于保存时间
data () {
return {
nowTime: ''
}
}
- 在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
}
- 在mounted钩子函数中调用nowTimes函数,在beforeDestroy钩子函数中调用clear函数
mounted () {
this.nowTimes()
},
beforeDestroy () {
this.clear()
}
- 显示在界面上
<div>
{{nowTime}}
</div>
以上都是看别人的博客所记录下来的,为了自己方便查看使用,若是侵权,请告诉我,我会把这篇文章设置为私密或者删除,谢谢——一个继续向前,永不言弃的菜鸟留言
方法一借鉴笔记地址
方法二借鉴笔记地址