Vue - 获取当前时间,并实时刷新
一.Vue 中如何获取当前时间,并实时更新当前时间data 生命周期中定义两个变量data() {return {times:'',//格式化之后的当前时间currentTime: new Date() //当前时间};},created 生命周期中调用当前时间created() {this.getTimes()},methods: {getTimes(){setInterval(this.get
·
一. Vue 中如何获取当前时间,并实时更新当前时间
data
生命周期中定义两个变量data() { return { times:'',//格式化之后的当前时间 }; },
created
生命周期中调用当前时间created() { this.getTimes() }, methods: { getTimes(){ setInterval(this.getTimesInterval, 1000); }, getTimesInterval:function() { let _this = this; let year = new Date().getFullYear(); //获取当前时间的年份 let month = new Date().getMonth() + 1; //获取当前时间的月份 let day = new Date().getDate(); //获取当前时间的天数 let hours = new Date().getHours(); //获取当前时间的小时 let minutes = new Date().getMinutes(); //获取当前时间的分数 let seconds = new Date().getSeconds(); //获取当前时间的秒数 //当小于 10 的是时候,在前面加 0 if (hours < 10) { hours = "0" + hours; } if (minutes < 10) { minutes = "0" + minutes; } if (seconds < 10) { seconds = "0" + seconds; } //拼接格式化当前时间 _this.times = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds; } }
- 在Vue实例销毁前,
beforeDestroy
生命周期中清除定时器beforeDestroy() { if (this.times) { clearInterval(this.getTimesInterval); } },
二. 一个实例
<template>
<div>
{{times}}
</div>
</template>
<script>
export default {
data() {
return {
times:'',//格式化之后的当前时间
};
},
created() {
this.getTimes()
},
// 在Vue实例销毁前,清除我们的定时器
beforeDestroy() {
if (this.times) {
clearInterval(this.getTimesInterval);
}
},
methods: {
getTimes(){
setInterval(this.getTimesInterval, 1000);
},
getTimesInterval:function() {
let _this = this;
let year = new Date().getFullYear(); //获取当前时间的年份
let month = new Date().getMonth() + 1; //获取当前时间的月份
let day = new Date().getDate(); //获取当前时间的天数
let hours = new Date().getHours(); //获取当前时间的小时
let minutes = new Date().getMinutes(); //获取当前时间的分数
let seconds = new Date().getSeconds(); //获取当前时间的秒数
//当小于 10 的是时候,在前面加 0
if (hours < 10) {
hours = "0" + hours;
}
if (minutes < 10) {
minutes = "0" + minutes;
}
if (seconds < 10) {
seconds = "0" + seconds;
}
//拼接格式化当前时间
_this.times = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
},
}
};
</script>
<style scoped>
</style>
更多推荐
已为社区贡献21条内容
所有评论(0)