vue-簡易タイマー(時、分、秒)

1.ページ上で要素にタイマーをバインドし、開始タイミングおよび一時停止タイミングボタンにclick関数をバインドする

  
{{str}}
            
            
          

2.dataで定義する場合、分、秒、ミリ秒で0に初期化
 

data(){
      return{
        h:0,//   ， ， ，       0；
        m:0,
        s:0,
        ms:0,
        time:0, //   
        str:'00:00:00',
        times:'' //        
      }
    }

3.methodsで3つの方法を書く

    methods: {
      start(){  //  
        this.time=setInterval(this.timer,50);
      },

      stop(){  //  
        clearInterval(this.time);
      },
      reset(){  //  
        clearInterval(this.time);
        this.h=0;
        this.m=0;
        this.ms=0;
        this.s=0;
        this.str="00:00:00";
      },
      timer(){                //      
        this.ms=this.ms+50;        //  
        if(this.ms>=1000){
          this.ms=0;
          this.s=this.s+1;        // 
        }
        if(this.s>=60){
          this.s=0;
          this.m=this.m+1;       //  
        }
        if(this.m>=60){
          this.m=0;
          this.h=this.h+1;        //  
        }
        this.str =this.toDub(this.h)+":"+this.toDub(this.m)+":"+this.toDub(this.s);
        //        
        this.times=this.s + this.m*60 + this.h*3600 ;
      },
      toDub(n){  // 0  
        if(n<10){
          return "0"+n;
        }
        else {
          return ""+n;
        }
      }
    }