本文實例為大家分享了vue實現(xiàn)計時器的具體代碼，供大家參考，具體內(nèi)容如下

這里做的是點擊按鈕開始與結束倒計時的功能

<div v-if='rptType'>{{str}}</div><div : @click='receipt'>開始</div>

data(){ return{ rptType: false,//狀態(tài) h:0,//定義時，分，秒，毫秒并初始化為0；m:0,ms:0,s:0,time:0,str:’’, }},mounted:function(){ this.$nextTick(function () {//整個視圖都渲染完畢 })},methods:{ getTask: function(e){ this.taskType = e; }, //開始 receipt: function() { this.rptType = !this.rptType; if(this.rptType){ this.time=setInterval(this.timer,50); }else{ this.reset() } }, timer: function(){ //定義計時函數(shù) 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.toDubms(this.ms)+'毫秒'*/; // document.getElementById(’mytime’).innerHTML=h+'時'+m+'分'+s+'秒'+ms+'毫秒'; }, toDub: function(n){ //補0操作 if(n<10){ return '0'+n; } else { return ''+n; } }, reset: function(){ //重置 clearInterval(this.time); this.h=0; this.m=0; this.ms=0; this.s=0; this.str='00:00:00'; },}

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網(wǎng)。