基于Vue方法實現簡單計時器
Vue簡單的計時器，供大家參考，具體內容如下
原理：setInterval來每隔1s(可設置的時間間隔)運行一次自增方法，clearInterval來讓持續運行的自增方法停止，來達到計時器的功能。Vue部分，利用到Vue實時刷新視圖的功能，來將自增變量的值展示在前端。
<!DOCTYPE html><html> <head> <meta charset='utf-8'> <title>Time</title> <script src='http://www.gepszalag.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>
效果圖
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。
相關文章：
1. php測試程序運行速度和頁面執行速度的代碼2. ASP中常用的22個FSO文件操作函數整理3. 三個不常見的 HTML5 實用新特性簡介4. Warning: require(): open_basedir restriction in effect,目錄配置open_basedir報錯問題分析5. ASP調用WebService轉化成JSON數據，附json.min.asp6. SharePoint Server 2019新特性介紹7. React+umi+typeScript創建項目的過程8. 無線標記語言(WML)基礎之WMLScript 基礎第1/2頁9. ASP.NET Core 5.0中的Host.CreateDefaultBuilder執行過程解析10. php網絡安全中命令執行漏洞的產生及本質探究
網公網安備