簡單講一下怎麼在 vue 裡面使用 setInterval 來製作一個計時器,首先準備一下這樣的 data
data: {
timer: null,
time: 99
},
接著在 html 把 time 放進去。
<div id="app">
<h1 class="text-center">{{time}}</h1>
</div>
在 methods 做一個倒數的功能
methods: {
countdown() {
this.time --;
}
},
接著在 mouted 的時候用 setInterval 製作一個計時器
mounted() {
this.timer=setInterval(this.countdown, 1000);
},
這樣我們就能看到數字每秒遞減了。
接著偵測時間 = 0 的時候停止計時器:
if(this.time==0){
clearInterval(this.timer)
}
最好也在 destroy 的時候把計時器清掉:
beforeDestroy() {
clearInterval(this.timer);
}
完整的 code