基于Vue方法實(shí)現(xiàn)簡單計(jì)時(shí)器
Vue簡單的計(jì)時(shí)器，供大家參考，具體內(nèi)容如下
原理：setInterval來每隔1s(可設(shè)置的時(shí)間間隔)運(yùn)行一次自增方法，clearInterval來讓持續(xù)運(yùn)行的自增方法停止，來達(dá)到計(jì)時(shí)器的功能。Vue部分，利用到Vue實(shí)時(shí)刷新視圖的功能，來將自增變量的值展示在前端。
<!DOCTYPE html><html> <head> <meta charset='utf-8'> <title>Time</title> <script src='http://www.lshqa.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>
效果圖
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. python中scrapy處理項(xiàng)目數(shù)據(jù)的實(shí)例分析2. HTML <!DOCTYPE> 標(biāo)簽3. 基于PHP與XML的PDF文檔生成技術(shù)4. 快速搭建Spring Boot+MyBatis的項(xiàng)目IDEA（附源碼下載）5. Python requests庫參數(shù)提交的注意事項(xiàng)總結(jié)6. AJAX的跨域問題解決方案7. 將properties文件的配置設(shè)置為整個(gè)Web應(yīng)用的全局變量實(shí)現(xiàn)方法8. ASP基礎(chǔ)入門第三篇(ASP腳本基礎(chǔ))9. jsp文件下載功能實(shí)現(xiàn)代碼10. WWDC總結(jié)：開發(fā)者需要知道的iOS 9 SDK新特性
網(wǎng)公網(wǎng)安備