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:

Implementing a simple timer based on Vue method
Vue-cli framework implements timer application
Using Vue to implement timer function
Vue.js implements simple timer function
Vue implements a simple timer component
How to implement Vue timer
Solve the problem of timer continuing to execute after Vue component is destroyed
Vue example code using timer to achieve marquee effect
Implementation code of vue timer component
How to encapsulate timer components in Vue3

<<: How to automatically execute the task schedule crontab every few minutes in a specified time period on Linux

>>: Import backup between mysql database and oracle database