基于Vue方法實(shí)現(xiàn)簡(jiǎn)單計(jì)時(shí)器
Vue簡(jiǎn)單的計(jì)時(shí)器,供大家參考,具體內(nèi)容如下
原理:setInterval來(lái)每隔1s(可設(shè)置的時(shí)間間隔)運(yùn)行一次自增方法,clearInterval來(lái)讓持續(xù)運(yùn)行的自增方法停止,來(lái)達(dá)到計(jì)時(shí)器的功能。Vue部分,利用到Vue實(shí)時(shí)刷新視圖的功能,來(lái)將自增變量的值展示在前端。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Time</title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"> <input type="button" name="" id="" value="開(kāi)始" @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í)有所幫助,也希望大家多多支持腳本之家。
- 使用vue實(shí)現(xiàn)計(jì)時(shí)器功能
- vue.js實(shí)現(xiàn)簡(jiǎn)單計(jì)時(shí)器功能
- vue實(shí)現(xiàn)簡(jiǎn)易計(jì)時(shí)器組件
- vue計(jì)時(shí)器的實(shí)現(xiàn)方法
- Vue計(jì)時(shí)器的用法詳解
- 解決vue組件銷毀之后計(jì)時(shí)器繼續(xù)執(zhí)行的問(wèn)題
- 在Vue環(huán)境下利用worker運(yùn)行interval計(jì)時(shí)器的步驟
- Vue 使用計(jì)時(shí)器實(shí)現(xiàn)跑馬燈效果的實(shí)例代碼
- vue 計(jì)時(shí)器組件的實(shí)現(xiàn)代碼
- Vue.js實(shí)現(xiàn)簡(jiǎn)單計(jì)時(shí)器應(yīng)用
相關(guān)文章
vue2.0在沒(méi)有dev-server.js下的本地?cái)?shù)據(jù)配置方法
這篇文章主要介紹了vue2.0在沒(méi)有dev-server.js下的本地?cái)?shù)據(jù)配置方法的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2018-02-02Vue3實(shí)現(xiàn)Message消息組件示例
在大多數(shù) web 產(chǎn)品中,全局的 Message 組件占有較大的使用場(chǎng)景,本文主要介紹了Vue3實(shí)現(xiàn)Message消息組件示例,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-06-06vue3封裝數(shù)字滾動(dòng)組件的實(shí)現(xiàn)示例
本文主要介紹了vue3封裝數(shù)字滾動(dòng)組件的實(shí)現(xiàn)示例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-08-08vue中可編輯樹(shù)狀表格的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue中可編輯樹(shù)狀表格的實(shí)現(xiàn)代碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-10-10使用vue+element?ui實(shí)現(xiàn)走馬燈切換預(yù)覽表格數(shù)據(jù)
這次做項(xiàng)目的時(shí)候遇到需要切換預(yù)覽表格數(shù)據(jù)的需求,所以下面這篇文章主要給大家介紹了關(guān)于使用vue+element?ui實(shí)現(xiàn)走馬燈切換預(yù)覽表格數(shù)據(jù)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08Vue組件中prop屬性使用說(shuō)明實(shí)例代碼詳解
這篇文章主要介紹了Vue組件中prop屬性使用說(shuō)明,非常不錯(cuò)具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-05-05Vue-cli 如何將px轉(zhuǎn)化為rem適配移動(dòng)端
這篇文章主要介紹了Vue-cli 如何將px轉(zhuǎn)化為rem適配移動(dòng)端,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-07-07Vue無(wú)后端配合實(shí)現(xiàn)導(dǎo)出功能的示例代碼
這篇文章主要為大家詳細(xì)介紹了Vue如何在無(wú)后端配合的情況下實(shí)現(xiàn)導(dǎo)出功能,文中的示例代碼簡(jiǎn)潔易懂,有需要的小伙伴可以跟隨小編一起了解一下2024-01-01