vue3中使用js实现一个从00:00:00动态的每秒递增的计时器,并将计算的值动态渲染在页面上
时间: 2024-09-23 12:14:42 浏览: 23
在Vue3中,你可以使用JavaScript的`setInterval`函数创建一个定时器,然后利用计算属性(Computed Property)来处理实时更新并渲染到页面上。这里是一个简单的示例:
首先,你需要在组件的`data`部分初始化当前时间:
```javascript
export default {
data() {
return {
currentTime: new Date().toLocaleTimeString('HH:mm:ss', { hour: '2-digit', minute: '2-digit', second: '2-digit' }),
};
},
};
```
接着,在`methods`或更常见的是`setup`钩子里设置一个计算属性来实现递增计时:
```javascript
import { ref, computed } from "vue";
// 如果你在setup()中,记得导入useEffect和watch
setup(props, { reactive }) {
const intervalRef = ref(null);
// 清理函数
function stopTimer() {
clearInterval(intervalRef.value);
}
// 创建计时器
useEffect(() => {
let count = 0;
intervalRef.value = setInterval(() => {
count++;
// 更新时间(假设你想显示毫秒)
const updatedTime = `${(count % 60).toString().padStart(2, '0')}:${Math.floor(count / 60).toString().padStart(2, '0')}:${Math.floor((count % (60 * 60)) / 60).toString().padStart(2, '0')}.${Math.floor((count % (60 * 60 * 1000))).toString().padStart(3, '0')}`;
// 计算属性会自动更新视图
this.currentTime = updatedTime;
}, 1000); // 每秒更新一次
// 返回清理函数以便在组件卸载时停止计时器
return () => stopTimer();
}, []);
// 当组件挂载后启动计时器
onMounted(() => stopTimer());
},
```
最后,在模板(template或`.vue`文件中的`<template>`标签内)绑定这个计算属性来显示它:
```html
<p>{{ currentTime }}</p>
```