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)

JavaScript web form function communication full of practical information

Implementing a simple timer based on Vue method

JavaScript web form function communication full of practical information

Django+mysql configuration and simple operation database example code

Vue method to verify whether the username is available

JavaScript to achieve the effect of clicking on the submenu

JavaScript offset implements mouse coordinate acquisition and module dragging within the window

Example code for implementing the "plus sign" effect with CSS

Native JS realizes uniform motion of various sports

Solution to the automatic stop of MySQL service

Detailed explanation of how to access MySQL database remotely through Workbench

An audio-visual Linux distribution that appeals to audiophiles

Recommend

Docker installation of Nginx problems and error analysis

Vue Element front-end application development preparation for the development environment

vue+element custom query component

Tutorial on installing and uninstalling python3 under Centos7

Steps to deploy Spring Boot project using Docker

Detailed explanation of anonymous slots and named slots in Vue

A good way to improve your design skills

In-depth analysis of homology and cross-domain, jsonp (function encapsulation), CORS principle

How to install Maven automatically in Linux continuous integration

Web page html special symbols html special characters comparison table

MySQL 8.0.17 decompression version installation and configuration method graphic tutorial

CSS Transition expands and collapses elements by changing the Height

Detailed explanation of samba + OPENldap to build a file sharing server

In-depth understanding of MySQL slow query log

js implements axios limit request queue