Implementing a simple timer based on Vue method

Vue's simple timer is for your reference. The specific contents are as follows

Principle: setInterval is used to run the self-increment method every 1s (settable time interval), and clearInterval is used to stop the continuously running self-increment method to achieve the function of the timer. In the Vue part, the real-time refresh view function of Vue is used to display the value of the auto-increment variable on the front end.

<!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="Start" @click="start"/></br>
   <h1>{{number}}</h1>
   <input type="button" name="" id="" value="Pause" @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>

Rendering

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:

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
Detailed usage of 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

<<: MySQL dual-machine hot standby implementation solution [testable]

>>: Installation and use of Linux operation and maintenance tool Supervisor (process management tool)

MySQL green version setting code and 1067 error details

Implementing a simple timer based on Vue method

MySQL green version setting code and 1067 error details

JavaScript to achieve product magnifying glass effect

How to handle the loss of parameters when refreshing the page when passing parameters to vue router

Mini Program Development to Implement Unified Management of Access_Token

How to manually build a new image with docker

MySQL updates a field in a table to be equal to the value of a field in another table

MySQL whole table encryption solution keyring_file detailed explanation

How to encapsulate the carousel component in Vue3

Vue implements user login switching

Nginx one domain name to access multiple projects method example

Recommend

Vue easily realizes watermark effect

Example to explain the size of MySQL statistics table

VUE realizes registration and login effects

Implementing the preview function of multiple image uploads based on HTML

Docker executes a command in a container outside the container

Float and Clear Float in Overview Page

How to use Volume to transfer files between host and Docker container

Implementation of Nginx configuration and access to local static resources in Mac environment

MySQL 5.5 installation and configuration graphic tutorial

How to move mysql5.7.19 data storage location in Centos7

Web page experience: Web page color matching

A troubleshooting experience of centos Docker bridge mode unable to access the host Redis service

Brief Analysis of MySQL B-Tree Index

View MySQL installation information under Linux server

Vue implements simple production of counter