vue3写一个十秒钟的倒计时
时间: 2023-07-07 15:37:30 浏览: 140
好的,以下是一个简单的 Vue 3 十秒钟倒计时的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>倒计时</title>
</head>
<body>
<div id="app">
<div v-if="count > 0">距离倒计时结束还有:{{ count }} 秒</div>
<div v-else>倒计时结束!</div>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const app = Vue.createApp({
data() {
return {
count: 10 // 倒计时时间(单位:秒)
}
},
mounted() {
// 每秒钟更新一次倒计时
this.timer = setInterval(() => {
if (this.count > 0) {
this.count--;
} else {
// 倒计时结束
clearInterval(this.timer);
}
}, 1000);
},
beforeUnmount() {
clearInterval(this.timer);
}
});
app.mount('#app');
</script>
</body>
</html>
```
这段代码会在页面上显示一个十秒钟的倒计时,每秒钟更新一次。当倒计时结束后,会显示“倒计时结束!”的提示。您可以根据需要修改 `count` 变量来设置倒计时的时间。注意,在组件销毁时需要清除计时器,以免造成内存泄漏。
阅读全文