基于Vue方法實現簡單計時器
Vue簡單的計時器，供大家參考，具體內容如下
原理：setInterval來每隔1s(可設置的時間間隔)運行一次自增方法，clearInterval來讓持續運行的自增方法停止，來達到計時器的功能。Vue部分，利用到Vue實時刷新視圖的功能，來將自增變量的值展示在前端。
<!DOCTYPE html><html> <head> <meta charset='utf-8'> <title>Time</title> <script src='http://www.wxshucaidpc.com/bcjs/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>
效果圖
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。
相關文章：
網公網安備