在vue中如何实现vue初始化开始计时
时间: 2023-10-29 13:16:09 浏览: 158
初始化vue项目,配置axios/elementUI/echarts/moment等
可以使用Vue的生命周期函数created来实现初始化开始计时。在created函数中,可以获取当前时间,并将其保存在Vue实例的data属性中。然后在Vue实例中使用定时器setInterval,每隔一段时间更新当前时间,并将其保存在Vue实例的data属性中。这样可以实现Vue的初始化开始计时功能。
示例代码如下:
```
<template>
<div>
<p>当前时间:{{ currentTime }}</p>
</div>
</template>
<script>
export default {
data() {
return {
startTime: null,
currentTime: null
}
},
created() {
this.startTime = new Date()
this.currentTime = this.startTime.toLocaleString()
setInterval(() => {
this.currentTime = new Date().toLocaleString()
}, 1000)
}
}
</script>
```
在上面的示例中,created函数中获取当前时间并保存在Vue实例的data属性中,然后使用setInterval定时器每隔一秒钟更新当前时间,并将其保存在Vue实例的data属性中。最终在模板中显示当前时间。
阅读全文