Vue获取当前时间并实时刷新的实现
作者：风轻轻~
想知道如何在Vue中轻松获取并实时更新当前时间？本文将手把手教你使用created和beforeDestroy生命周期,结合data变量和定时器,实现秒级刷新,点击立即掌握这个实用的Vue技巧,避免常见坑点
一、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>
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。