vue3实现正计时
时间: 2023-06-29 22:20:30 浏览: 76
在Vue3中实现正计时的方法如下:
1. 在Vue组件中定义一个data属性,用于保存倒计时的时间:
```javascript
data() {
return {
time: 0
}
}
```
2. 在mounted钩子函数中启动计时器,每秒更新一次时间:
```javascript
mounted() {
setInterval(() => {
this.time++
}, 1000)
}
```
3. 在模板中显示时间,可以使用计算属性将时间转换为小时、分钟和秒数:
```html
<template>
<div>
<p>{{ hours }} : {{ minutes }} : {{ seconds }}</p>
</div>
</template>
<script>
export default {
data() {
return {
time: 0
}
},
mounted() {
setInterval(() => {
this.time++
}, 1000)
},
computed: {
hours() {
return Math.floor(this.time / 3600)
},
minutes() {
return Math.floor((this.time % 3600) / 60)
},
seconds() {
return this.time % 60
}
}
}
</script>
```
这样就能够实现一个简单的正计时功能。