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)

Solve the problem of black screen when starting VMware virtual machine

Implementing a simple timer based on Vue method

Solve the problem of black screen when starting VMware virtual machine

Build nginx virtual host based on domain name, port and IP

MySQL transaction control flow and ACID characteristics

JavaScript to achieve time range effect

A brief discussion on front-end network, JavaScript optimization and development tips

In-depth understanding of React Native custom routing management

Detailed explanation of Vue's monitoring properties

Sample code for nginx to achieve dynamic and static separation

CSS adaptive layout realizes the overall centering of sub-element items and left alignment of internal items

Two ways to start Linux boot service

Recommend

How to install Docker on Raspberry Pi

How to pass parameters to JS via CSS

The principle and implementation of js drag effect

Graphic tutorial for installing MySQL 5.6.35 on Windows 10 64-bit

Solution to the problem that directly setting the width and height of a hyperlink does not work

Example statements for indexes and constraints in MySQL

Example of MySQL slow query

How to solve the problem of not finding the password after decompressing the MySQL free installation version

How to connect to MySQL visualization tool Navicat

The images in HTML are directly replaced by base64 encoded strings

MySQL Binlog Data Recovery: Detailed Explanation of Accidentally Deleting a Database

Javascript Basics: Detailed Explanation of Operators and Flow Control

WeChat applet picker multi-column selector (mode = multiSelector)

MySQL 8.0.17 installation graphic tutorial

MySQL 8.0.12 Quick Installation Tutorial