vue实现计数器,vue组件里的倒计时定时器

　　本文主要详细介绍vue定时器的实现方法。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。

　　本文分享了vue定时器的具体代码，供大家参考，具体内容如下

　　我们在这里做的是点击按钮开始和结束倒计时功能。

　　div class= time v-if= RPT type“{ str } }/div

　　div class= receipt :class= RPT type？jdz : Jie Dan @ click= receipt start/div

　　data(){

　　返回{

　　RptType: false，//状态

　　H:0，//定义时，分、秒、毫秒并初始化为0；

　　男：0，

　　毫秒：0，

　　学生：0，

　　时间：0，

　　字符串：，

　　}

　　},

　　已安装：函数(){

　　这个。$nextTick(function () {//渲染整个视图

　　})

　　},

　　方法：{

　　getTask:函数(e){

　　this . task type=e；

　　},

　　//开始

　　收据：函数(){

　　this.rptType=！this . RPT type；

　　if(this.rptType){

　　this . time=setInterval(this . timer，50)；

　　}否则{

　　this.reset()

　　}

　　},

　　Timer: function(){ //定义计时函数

　　this . ms=this . ms 50；//毫秒

　　如果(this.ms=1000){

　　this . ms=0；

　　this . s=this . s 1；//秒

　　}

　　如果(this.s=60){

　　this . s=0；

　　this . m=this . m 1；//分钟

　　}

　　如果(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( my time )。innerhtml=h 代表 m 分 s 秒 ms 毫秒；

　　},

　　ToDub:function(n){//0-填充操作

　　如果(n10){

　　返回“0”n；

　　}

　　否则{

　　return“”n；

　　}

　　},

　　重置：函数(){ //重置

　　clear interval(this . time)；

　　this . h=0；

　　this . m=0；

　　this . ms=0；

　　this . s=0；

　　this . str= 00:00:00 ；

　　},

　　}

　　这就是本文的全部内容。希望对大家的学习有帮助，支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。