Detailed usage of Vue timer
|
This article example shares the specific code of Vue to implement the timer for your reference. The specific content is as follows
Function Introduction:1. The initial value is 0. Click the [Add] button and the number will increase by 1. Continuously clicking [Add] will not affect the number +1 2. Click the [Stop] button to stop +1 Source code:
<!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. Import the Vue package-->
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<!-- 2. Create an area to control -->
<div id="app">
<input type="button" value="Add" @click="add">
<input type="button" value="Stop" @click="stop">
<h4>{{ count }}</h4>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
count: 0,
intervalId: null
},
methods: {
add() {
// Timer in progress, exit function if (this.intervalId != null) {
return
};
// The timer is empty, operation this.intervalId = setInterval(() => {
this.count += 1
}, 400)
},
// Stop the timer stop() {
clearInterval(this.intervalId) // Clear timer this.intervalId = null; // Set to null
}
}
})
</script>
</body>
</html>Previously, the editor collected a component for starting timing. This component can be directly introduced into the project for use. Thank you for sharing.
<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>The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
>>: Import backup between mysql database and oracle database
Recommend
How to implement Mysql scheduled task backup data under Linux
Preface Backup is the basis of disaster recovery....
js development plug-in to achieve tab effect
This article example shares the specific code of ...
Common parameters of IE web page pop-up windows can be set by yourself
The pop-up has nothing to do with whether your cur...
MySQL trigger usage scenarios and method examples
trigger: Trigger usage scenarios and correspondin...
mysql row column conversion sample code
1. Demand We have three tables. We need to classi...
Talking about the use of CSS3 custom variables in projects from a project reconstruction
About CSS3 variables When declaring a variable, a...
Vue.js implements tab switching and color change operation explanation
When implementing this function, the method I bor...
Mysql solution to improve the efficiency of copying large data tables
Preface This article mainly introduces the releva...
Comparison between Redis and Memcache and how to choose
I've been using redis recently and I find it ...
B2C website user experience detail design reference
Recently, when using Apple.com/Ebay.com/Amazon.co...
How to configure common software on Linux
When you get a new Linux server, you generally ha...
How to reasonably use the redundant fields of the database
privot is the intermediate table of many-to-many ...
MySQL 8.0.12 Quick Installation Tutorial
The installation of MySQL 8.0.12 took two days an...
Some suggestions for ensuring MySQL data security
Data is the core asset of an enterprise and one o...
Vue implements image dragging and sorting
This article example shares the specific code of ...