基于Vue方法實現(xiàn)簡單計時器
更新時間：2021年08月08日 08:49:12 作者：風塵DX
這篇文章主要為大家詳細介紹了基于Vue方法實現(xiàn)簡單計時器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
Vue簡單的計時器，供大家參考，具體內(nèi)容如下
原理：setInterval來每隔1s(可設置的時間間隔)運行一次自增方法，clearInterval來讓持續(xù)運行的自增方法停止，來達到計時器的功能。Vue部分，利用到Vue實時刷新視圖的功能，來將自增變量的值展示在前端。
<!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="開始" @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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue2.0在沒有dev-server.js下的本地數(shù)據(jù)配置方法
這篇文章主要介紹了vue2.0在沒有dev-server.js下的本地數(shù)據(jù)配置方法的相關(guān)資料，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2018-02-02
在大多數(shù) web 產(chǎn)品中，全局的 Message 組件占有較大的使用場景，本文主要介紹了Vue3實現(xiàn)Message消息組件示例，需要的朋友們下面隨著小編來一起學習學習吧2021-06-06
本文主要介紹了vue3封裝數(shù)字滾動組件的實現(xiàn)示例,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2024-08-08
這篇文章主要為大家詳細介紹了vue+iview實現(xiàn)文件上傳，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
這篇文章主要介紹了vue中可編輯樹狀表格的實現(xiàn)代碼,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-10-10
使用vue+element?ui實現(xiàn)走馬燈切換預覽表格數(shù)據(jù)
這次做項目的時候遇到需要切換預覽表格數(shù)據(jù)的需求,所以下面這篇文章主要給大家介紹了關(guān)于使用vue+element?ui實現(xiàn)走馬燈切換預覽表格數(shù)據(jù)的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-08-08
這篇文章主要介紹了Vue3中的provide、inject 的用法,需要的朋友可以參考下2023-03-03
這篇文章主要介紹了Vue組件中prop屬性使用說明,非常不錯具有一定的參考借鑒價值，需要的朋友可以參考下2018-05-05
Vue-cli 如何將px轉(zhuǎn)化為rem適配移動端
這篇文章主要介紹了Vue-cli 如何將px轉(zhuǎn)化為rem適配移動端,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-07-07
這篇文章主要為大家詳細介紹了Vue如何在無后端配合的情況下實現(xiàn)導出功能,文中的示例代碼簡潔易懂,有需要的小伙伴可以跟隨小編一起了解一下2024-01-01