[Vue.js] 簡單計時器

簡單講一下怎麼在 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