vue计时器的实现方法

本文实例为大家分享了vue实现计时器的具体代码，供大家参考，具体内容如下

这里做的是点击按钮开始与结束倒计时的功能

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

data(){ return{ rptType: false,//状态 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(){ //定义计时函数 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'; },}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持好吧啦网。