Vue 時間倒數是一種非常實用的功能。它可以讓用戶在屏幕上倒計時,并且顯示剩余時間。使用 Vue 時間倒數功能可以增強用戶對倒計時的感知,防止錯過重要任務時間。
下面是一個簡單的 Vue 時間倒數示例:
<template>
<div>
<h2>{{ countdown }}</h2>
<button @click="startCountdown">開始倒數</button>
</div>
</template>
<script>
export default {
data() {
return {
countdown: '倒計時未開始',
timer: null,
seconds: 10
};
},
methods: {
startCountdown() {
this.timer = setInterval(() => {
if (this.seconds <= 0) {
clearInterval(this.timer);
this.countdown = '倒計時已結束';
return;
}
this.countdown = '剩余時間: ' + --this.seconds + ' 秒';
}, 1000);
}
}
};
</script>
在上面的示例中,我們定義了一個倒計時計數器,并在頁面中顯示剩余時間。當倒計時結束時,我們通過 clearInterval() 函數來停止計時器。這樣就可以實現在 Vue 中使用倒計時。如果需要自定義樣式,可以直接修改模板中的 HTML 和 CSS。