vuejs 实现24小时倒计时

DOM结构
<div class="SYtime">
                剩余
                <span class="span">{{hh}}</span>:
                <span class="span">{{mm}}</span>:
                <span class="span">{{ss}}</span>自动结束
            </div>

 

vue代码结构

data(){
return{
      hh: '00',
      mm: '00',
      ss: '00',
      flag: false,
}
}
mounted () {
    let time = setInterval(() => {
      if (this.flag == true) {
        clearInterval(time)
      }
      this.timeDown()
    }, 500)
  },
methods:{
  timeDown () {
      const endTime = new Date(this.beginTime).getTime() + 24 * 60 * 60 * 1000;
      const nowTime = new Date(this.beginTime);
      var date = new Date();
      var now = date.getTime(nowTime);
      //设置截止时间
      var endDate = new Date(endTime);
      var end = endDate.getTime();
      //时间差
      var rightTime = end - now;//截止时间减去当前时间
      if (rightTime > 0) {//判断剩余倒计时时间如果大于0就执行倒计时否则就结束
        // var dd = Math.floor(rightTime / 1000 / 60 / 60 / 24);
        var hh = Math.floor((rightTime / 1000 / 60 / 60) % 24);
        var mm = Math.floor((rightTime / 1000 / 60) % 60);
        var ss = Math.floor((rightTime / 1000) % 60);
        this.hh = hh;
        this.mm = mm;
        this.ss = ss;
      } else {
        this.isfail = true;
      }
    },
}