Vue計(jì)時(shí)器的用法詳解
本文實(shí)例為大家分享了Vue實(shí)現(xiàn)計(jì)時(shí)器的具體代碼，供大家參考，具體內(nèi)容如下
1、初始值為0，點(diǎn)擊【加】按鈕，數(shù)字自+1；連續(xù)點(diǎn)擊【加】，不影響數(shù)字+1
2、點(diǎn)擊【停】按鈕，停止+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. 導(dǎo)入Vue包 --> <script src='http://www.leifengta.com.cn/bcjs/lib/vue-2.4.0.js'></script></head> <body> <!-- 2. 創(chuàng)建一個(gè)要控制的區(qū)域 --> <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() { // 計(jì)時(shí)器正在進(jìn)行中，退出函數(shù) if (this.intervalId != null) { return }; // 計(jì)時(shí)器為空，操作 this.intervalId = setInterval(() => { this.count += 1 }, 400)},// 停止定時(shí)器stop() { clearInterval(this.intervalId)//清除計(jì)時(shí)器 this.intervalId = null;//設(shè)置為null } } }) </script></body> </html>
之前小編收藏了一個(gè)開始計(jì)時(shí)的組件，這個(gè)組件可直接引入到項(xiàng)目中使用，謝謝原作者分享。
<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 () { clearInterval(this.timer); },methods: { startTimer () { this.seconds += 1; if (this.seconds >= 60) { this.seconds = 0; this.minute = this.minute + 1; }if (this.minute >= 60) { this.minute = 0; this.hour = this.hour + 1; } this.$refs.startTimer.innerHTML = (this.minutes < 10 ? ’0’ + this.minutes : this.minutes) + ’:’ + (this.seconds < 10 ? ’0’ + this.seconds : this.seconds); } } } </script> <style></style>
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. CentOS郵箱服務(wù)器搭建系列——SMTP服務(wù)器的構(gòu)建（ Postfix ）2. asp文件用什么軟件編輯3. PHP基礎(chǔ)之生成器4——比較生成器和迭代器對(duì)象4. Docker 啟動(dòng)Redis 并設(shè)置密碼的操作5. ASP新手必備的基礎(chǔ)知識(shí)6. JAVA 實(shí)現(xiàn)延遲隊(duì)列的方法7. 利用CSS制作3D動(dòng)畫8. vue+element開發(fā)一個(gè)谷歌插件的全過程9. JS中6個(gè)對(duì)象數(shù)組去重的方法10. Spring如何替換掉默認(rèn)common-logging.jar
網(wǎng)公網(wǎng)安備