vue如何动态获取当前时间
作者：性野喜悲
这篇文章主要介绍了vue如何动态获取当前时间问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue动态获取当前时间
获取当前时间：
<template>
<div id="home">
<span class="deadline">截止{{ gettime }}</span>
</div>
</template>
<script>
export default {
name: "Home",
data() {
return {
gettime: "", //当前时间
};
},
methods: {
getTime() {
var _this = this;
let yy = new Date().getFullYear();
var mm =
new Date().getMonth() > 9
? new Date().getMonth() + 1
: new Date().getMonth() == 9
? new Date().getMonth() + 1
: '0' + (new Date().getMonth() + 1);
var dd = new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date().getDate();
let hh = new Date().getHours();
let mf =
new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes();
let ss =
new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds();
_this.gettime = yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf + ':' + ss;
},
currentTime() {
setInterval(this.getTime, 1000);
},
},
mounted() {
this.currentTime();
},
};
</script>
<style scoped>
</style>获取当前日期：
<template>
<div id="home">
<span class="deadline">当前日期{{ sendTime }}</span>
</div>
</template>
<script>
export default {
name: "Home",
data() {
return {
sendTime: "", //当前时间
};
},
mounted() {
this.format();
},
methods: {
format() {
const nowDate = new Date();
const date = {
year: nowDate.getFullYear(),
month: nowDate.getMonth() + 1,
date: nowDate.getDate(),
}
const newmonth = date.month > 9 ? date.month : '0' + date.month
const day = date.date > 9 ? date.date : '0' + date.date
this.sendTime = date.year + '.' + newmonth + '.' + day
}, //获取当前时间
},
};
</script>
<style scoped>
</style>vue获取当前时间并时时刷新
页面显示
<div><span>{{nowDate}}</span><span class="houertime">{{hourDate}}</span></div>图片上传失败！！！！，我是分开年月日和时分秒，给时分秒加样式
2022/11/24 18:30:20
data中定义变量和定时器
在created中放一个定时器，每秒读取当前时间一次，
在定时器之前先加载，否则会延迟一秒
data(){
return {
nowDate: null,
hourDate: null,
nowtimer: ''
}
},
created() {
this.gettime() // 如果不先调用一次的话，页面显示一秒后，时间才会显示
this.nowtimer = setInterval(this.gettime, 1000);
},
methods: {
gettime() {
this.nowDate = new Date().toLocaleString('zh', { year: 'numeric', month: 'numeric', day: 'numeric' })
this.hourDate = new Date().toLocaleString('zh', { hour: 'numeric', minute: 'numeric', second: 'numeric' })
}
},最后进行销毁
beforeDestroy () {
if (this.nowDate && this.hourDate) {
clearInterval(this.nowDate, this.hourDate) // 在Vue实例销毁前，清除定时器
}
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。