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

這里做的是點(diǎn)擊按鈕開(kāi)始與結(jié)束倒計(jì)時(shí)的功能

<div v-if='rptType'>{{str}}</div><div : @click='receipt'>開(kāi)始</div>

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。