基于Vue方法實現(xiàn)簡單計時器
Vue簡單的計時器，供大家參考，具體內(nèi)容如下
原理：setInterval來每隔1s(可設(shè)置的時間間隔)運行一次自增方法，clearInterval來讓持續(xù)運行的自增方法停止，來達到計時器的功能。Vue部分，利用到Vue實時刷新視圖的功能，來將自增變量的值展示在前端。
<!DOCTYPE html><html> <head> <meta charset='utf-8'> <title>Time</title> <script src='http://m.b3g6.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>
效果圖
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. ASP基礎(chǔ)知識VBScript基本元素講解2. Python 利用Entrez庫篩選下載PubMed文獻摘要的示例3. Python 制作查詢商品歷史價格的小工具4. Linux刪除系統(tǒng)自帶版本Python過程詳解5. Python3 json模塊之編碼解碼方法講解6. python 使用事件對象asyncio.Event來同步協(xié)程的操作7. Python sublime安裝及配置過程詳解8. Python 合并拼接字符串的方法9. Python插件機制實現(xiàn)詳解10. ASP.NET MVC使用jQuery ui的progressbar實現(xiàn)進度條
網(wǎng)公網(wǎng)安備