vue中时间戳转换时间格式并实时刷新案例
2019-12-09 本文已影响0人
zyghhhh
<template>
<div>
<div class="top">
<div class="time">{{date}}</div>
</div>
</div>
</template>
<script>
import { dateFormat } from "../utils/index.js";
export default {
data() {
return {
date: `${
new Date().getFullYear()}年${ (new Date().getMonth()+1 >9 ? new Date().getMonth()+1 : new Date().getMonth()+1)}月${(new Date().getDate()>9 ? new Date().getDate() : '0' + new Date().getDate())}日
${new Date().getHours()>9 ? new Date().getHours(): '0' + new Date().getHours()}:${ new Date().getMinutes()>9 ? new Date().getMinutes(): '0' + new Date().getMinutes()}:${ new Date().getSeconds()>9 ? new Date().getSeconds(): '0' + new Date().getSeconds()
}`
};
},
mounted() {
let _this = this; // 声明一个变量指向Vue实例this,保证作用域一致
this.timer = setInterval(() => {
_this.date = dateFormat(Date.parse(_this.date), "Y年m月d日 H:i:s"); // 修改数据date
// _this.date = dateFormat(Date.parse(_this.date), "Y m-d H:i:s"); // 修改数据date
// dateFormat(Date.parse(_this.date), "Y年m月d日 H:i:s");
console.log('22')
}, 1000);
},
beforeDestroy() {
if (this.timer) {
clearInterval(this.timer); // 在Vue实例销毁前,清除我们的定时器
}
},
components: {}
};
</script>
<style lang='' scoped>
.top {
height: 25vh;
width: 30vw;
margin: 0 auto;
}
.title {
width: 100%;
height: 40%;
background-image: url("../assets/title.jpg");
}
</style>