您当前的位置:首页 > 网站建设 > javascript
| php | asp | css | H5 | javascript | Mysql | Dreamweaver | Delphi | 网站维护 | 帝国cms | React | 考试系统 | ajax |

基于Vue方法实现简单计时器

51自学网 2022-05-02 21:35:10
  javascript

Vue简单的计时器,供大家参考,具体内容如下

原理:setInterval来每隔1s(可设置的时间间隔)运行一次自增方法,clearInterval来让持续运行的自增方法停止,来达到计时器的功能。Vue部分,利用到Vue实时刷新视图的功能,来将自增变量的值展示在前端。

<!DOCTYPE html><html> <head>  <meta charset="utf-8">  <title>Time</title>  <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body>  <div id="app">   <input type="button" name="" id="" value="开始" @click="start"/></br>   <h1>{{number}}</h1>   <input type="button" name="" id="" value="暂停" @click="stop"/></br>  </div>    <script type="text/javascript">   var vm=new Vue({    el:"#app",    data:{     number:0    },    methods:{     start:function(){      time=setInterval(function(){       vm.number++      },1000)     },     stop:function(){      clearInterval(time)     }    }   })  </script> </body></html>

效果图

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持wanshiok.com。


浅谈Vue3中key的作用和工作原理
Vue计算属性实现成绩单
51自学网,即我要自学网,自学EXCEL、自学PS、自学CAD、自学C语言、自学css3实例,是一个通过网络自主学习工作技能的自学平台,网友喜欢的软件自学网站。
京ICP备13026421号-1