基於Vue方法實現簡單計時器
阿新 • • 發佈：2021-08-09
簡單的計時器，供大家參考，具體內容如下
原理：setInterval來每隔1s(可設定的時間間隔)執行一次自增方法，clearInterval來讓持續執行的自增方法停止，來達到計時器的功能。Vue部分，利用到Vue實時重新整理檢視的功能，來將自增變數的值展示在前端。
<!DOCTYPE html> <html>oZnSEKz <head> <meta charset="utf-8"> <title>Time</title> <script src="/vue.js" type="text/" 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/script"> var vm=new Vue({ el:"#app",data:{ number:0 },methods:{ start:function(){ time=setInterval(function(){ vm.number++ },1000) },stop:function(){ clearInterval(time) } } }) </script> </body> oZnSEKz</html>
效果圖
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。