基于Vue方法實(shí)現(xiàn)簡(jiǎn)單計(jì)時(shí)器
Vue簡(jiǎn)單的計(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.hdgsjgj.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>
效果圖
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. phpstudy apache開啟ssi使用詳解2. vue3+ts+elementPLus實(shí)現(xiàn)v-preview指令3. Xml簡(jiǎn)介_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理4. JSP之表單提交get和post的區(qū)別詳解及實(shí)例5. 詳解瀏覽器的緩存機(jī)制6. xml中的空格之完全解說7. jsp實(shí)現(xiàn)登錄驗(yàn)證的過濾器8. jsp文件下載功能實(shí)現(xiàn)代碼9. 使用Hangfire+.NET 6實(shí)現(xiàn)定時(shí)任務(wù)管理(推薦)10. 如何在jsp界面中插入圖片
網(wǎng)公網(wǎng)安備