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)

Postman data encryption and decryption to implement APP login interface simulation request

Implementing a simple timer based on Vue method

Postman data encryption and decryption to implement APP login interface simulation request

How to add docker port and get dockerfile

How to compile and install xdebug in Ubuntu environment

How to deploy SpringBoot project using Dockerfile

Steps to deploy multiple tomcat services using DockerFile on Docker container

The difference between ID and Name attributes of HTML elements

MySQL trigger trigger add, delete, modify and query operation example

In-depth explanation of MySQL user account management and permission management

Design of pop-up windows and floating layers in web design

A brief discussion on order reconstruction: MySQL sharding

Recommend

A quick solution to accidentally delete MySQL data (MySQL Flashback Tool)

Detailed graphic explanation of how to clear the keep-alive cache

A quick solution to the automatic line break problem of table header in responsive framework

In-depth analysis of the various backgrounds, usage scenarios and techniques of CSS

Ubuntu16.04 builds php5.6 web server environment

Detailed explanation of JavaScript's Set data structure

MySQL 5.7.18 version free installation configuration tutorial

Solution for Baidu site search not supporting https (tested)

Solution to BT Baota Panel php7.3 and php7.4 not supporting ZipArchive

Detailed usage of kubernetes object Volume

Docker-compose installation db2 database operation

Let me teach you how to use font icons in CSS

Introduction to the use of MySQL performance stress benchmark tool sysbench

Using JS to implement binary tree traversal algorithm example code

Uniapp realizes sliding scoring effect