Vue計時器的用法詳解
阿新 • • 發佈：2021-06-28
本文例項為大家分享了實現計時器的具體程式碼，供大家參考，具體內容如下
功能簡介：
1、初始值為0，點選【加】按鈕，數字自+1；連續點選【加】，不影響數字+1
2、點選【停】按鈕，停止+1
原始碼：
<!DOCTYPE html>
<html add="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 1. 匯入Vue包 -->
<script src="./lib/vue-2.4.0."></script>
</head>
<body>
<!-- 2. 建立一個要控制的區域 -->
<div id="app">
<input type="button" value="加" @click="add">
<input type="button" value="停" @click="stop">
<h4>{{ count }}</h4>
</div>
<script>
var vm = new Vue({
el: '#app',data: {
count: 0,intervalId: null
},methods: {
add() {
// 計時器正在進行中，退出函式
if (this.intervalId != null) {
return
};
// 計時器為空，操作
this.intervalId = setInterval(() => {
this.count += 1
},400)
},// 停止定時器
stop()
之前小編收藏了一個開始計時的元件，這個元件可直接引入到專案中使用，謝謝原作者分享。
<template>
<div class="timer">
<div ref="startTimer"></div>
</div>
</template>
<script>
export default {
name: 'Timer',data () {
return {
timer: "",content: "",hour: 0,minutes: 0,seconds: 0
}
},created () {
this.timer = setInterval(this.startTimer,1000);
},destroyed () {
clearInter客棧 以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。