【vue|vue实时获取时间】当我们想要在vue中实时的获取最新的时间,可以使用下面的方法:
>
export default {
data() {
return {
timer: "", //定义一个定时器的变量
currentTime:
new Date().getFullYear() +
"-" +
new Date().getMonth() +
1 +
"-" +
new Date().getDate() +
" " +
new Date().getHours() +
":" +
new Date().getMinutes() +
":" +
new Date().getSeconds(), // 获取当前时间
}
},
created() {
var vm = this
vm.timer = setInterval(() => {
var y = new Date().getFullYear()
var m = vm.appendZero(new Date().getMonth() + 1)
var d = vm.appendZero(new Date().getDate())
var ho = vm.appendZero(new Date().getHours())
var mi = vm.appendZero(new Date().getMinutes())
var se = vm.appendZero(new Date().getSeconds())
//修改数据date
vm.currentTime = y + "-" + m + "-" + d + " " + ho + ":" + mi + ":" + se
}, 1000)
},
methods: {
//时间过滤加0
appendZero(obj) {
if (obj < 10) {
return "0" + obj
} else {
return obj
}
},
},beforeDestroy() {
if (this.timer) {
clearInterval(this.timer) // 在Vue实例销毁前,清除我们的定时器
}
},
}
然后再模板中使用:
文章图片
推荐阅读
- 笔记|require.context()的用法详解
- element|element ui日期组件设置默认时间
- 前端|vue使用echarts-liquidfill水球图不生效
- 笔记|echarts公司内部图表(冒死上传)
- Java专题|【在线实习】推推项目课程介绍—小说更新就通知
- ui|13个帮你提高开发效率的现代CSS框架
- 前端|idea如何运行Java Web项目(Servlet、JSP)
- 面试|2018年java进阶需要关注的公众号
- 面试|2019java面试(六)