基于Vue方法實現簡單計時器
Vue簡單的計時器，供大家參考，具體內容如下
原理：setInterval來每隔1s(可設置的時間間隔)運行一次自增方法，clearInterval來讓持續運行的自增方法停止，來達到計時器的功能。Vue部分，利用到Vue實時刷新視圖的功能，來將自增變量的值展示在前端。
<!DOCTYPE html><html> <head> <meta charset='utf-8'> <title>Time</title> <script src='http://m.4tl426be.cn/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. React+umi+typeScript創建項目的過程2. .Net core 的熱插拔機制的深入探索及卸載問題求救指南3. ASP調用WebService轉化成JSON數據，附json.min.asp4. SharePoint Server 2019新特性介紹5. 三個不常見的 HTML5 實用新特性簡介6. 解決ASP中http狀態跳轉返回錯誤頁的問題7. ASP中常用的22個FSO文件操作函數整理8. 無線標記語言(WML)基礎之WMLScript 基礎第1/2頁9. ASP.NET Core 5.0中的Host.CreateDefaultBuilder執行過程解析10. ASP編碼必備的8條原則
網公網安備