如何使用vue实现计时器功能

小编给大家分享一下如何使用Vue实现计时器功能，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

具体内容如下

首先我们要知道setTimeout和setInterval的区别

setTimeout只在指定时间后执行一次，代码如下：

<script>  //定时器 异步运行  function hello(){  alert("hello");  }  //使用方法名字执行方法  var t1 = window.setTimeout(hello,1000);  var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法  window.clearTimeout(t1);//去掉定时器  </script>

setInterval以指定时间为周期循环执行，代码如下：

//实时刷新时间单位为毫秒  setInterval('refreshQuery()',8000);     function refreshQuery(){     $("#mainTable").datagrid('reload',null);  }

一般情况下setTimeout用于延迟执行某方法或功能，
setInterval则一般用于刷新表单，对于一些表单的实时指定时间刷新同步

计时器

html代码

<div class="father">  <ul>   <li>{{one}}<span>:</span></li>   <li>{{two}}<span>:</span></li>   <li>{{three}}</li>  </ul>  <el-button type="primary" @click="startHandler">开始</el-button>  <el-button type="primary" @click="endHandler">暂停</el-button></div>

javascript代码

<script>export default {  name: 'HelloWorld',  data(){   return {  flag: null,  one : '00', // 时  two : '00', // 分  three : '00', // 秒  abc : 0, // 秒的计数  cde : 0, // 分的计数  efg : 0, // 时的计数   }  },  props: {    msg: String  },  mounted() {     },  methods:{  // 开始计时 startHandler(){  this.flag = setInterval(()=>{   if(this.three === 60 || this.three === '60'){    this.three = '00';    this.abc = 0;    if(this.two === 60 || this.two === '60'){     this.two = '00';     this.cde = 0;     if(this.efg+1 <= 9){      this.efg++;      this.one = '0' + this.efg;     }else{      this.efg++;      this.one = this.efg;     }    }else{     if(this.cde+1 <= 9){      this.cde++;      this.two = '0' + this.cde;     }else{      this.cde++;      this.two = this.cde;     }    }   }else{    if(this.abc+1 <= 9){     this.abc++;     this.three = '0' + this.abc;    }else{     this.abc++;     this.three=this.abc;    }   }     },100) }, // 暂停计时 endHandler(){  this.flag = clearInterval(this.flag) }  }}</script>

效果如下：

看完了这篇文章，相信你对“如何使用vue实现计时器功能”有了一定的了解，如果想了解更多相关知识，欢迎关注编程网精选频道，感谢各位的阅读！