Vue implements a small countdown function

Countdown function needs to be implemented in many projects, for example: sending verification code. Now let's take an example to implement a simple countdown button function. Simple layout, simple operation, simple effect, and most importantly, understanding of the ideas and countdown steps! ! !

For example, the code is as follows:

Requirements: Click the submit button and count down for five seconds. During the countdown, the input box and submit button are disabled. After the countdown ends, the input box and submit button return to normal state.

1. First implement the required HTML layout and add click events

<div>
    <!-- disabled is true to disable -->
    Input box: <input type="text" :disabled="istrue">
    <button @click="addHandle" :disabled="istrue">Submit</button>
    <!-- Countdown text prompt-->
    <p>{{this.txt}}</p>
</div>

2. Click the submit button and the countdown starts to change to disabled state. Define a timer

<script>
export default {
  data(){
    return {
      txt:'',
      istrue:false,
      inp:''
    }
  },
  methods:{
    addHandle(){
      //define n=5 seconds let n=5
      //Define the timer time
      let time = setInterval(()=>{
        //Disable this.istrue=true
        //Change the countdown text prompt this.txt=n+'Submit in seconds'
        n--
        //If n<0, clear the timer, cancel the disabled state, and the text prompt is empty (not displayed)
        if(n<0){
          this.txt=""
          this.istrue=false
          clearInterval(time)
        }
      },1000)
    }
  }
}
</script>

The ideas and steps are written in the comments above, and a simple countdown is easily achieved.

Overall code:

<template>
  <div>
    <!-- disabled is true to disable -->
    Input box: <input type="text" :disabled="istrue">
    <button @click="addHandle" :disabled="istrue">Submit</button>
    <!-- Countdown text prompt-->
    <p>{{this.txt}}</p>
  </div>
</template>
<script>
export default {
  data(){
    return {
      txt:'',
      istrue:false,
      inp:''
    }
  },
  methods:{
    addHandle(){
      //define n=5 seconds let n=5
      //Define the timer time
      let time = setInterval(()=>{
        //Disable this.istrue=true
        //Change the countdown text prompt this.txt=n+'Submit in seconds'
        n--
        //If n<0, clear the timer, cancel the disabled state, and the text prompt is empty (not displayed)
        if(n<0){
          this.txt=""
          this.istrue=false
          clearInterval(time)
        }
      },1000)
    }
  }
}
</script>

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 writes a simple countdown button function
Simple implementation of the 60-second countdown function of the vue verification code
Vue2.0 countdown plug-in (timestamp refresh jump is not affected)
SMS verification code countdown demo based on vue
Vue implements the countdown function of the mall flash sale
Vue implements countdown to get verification code effect
Vue implements the countdown function of the verification code button
Multiple countdown implementation code examples in Vue
Detailed explanation of designing a countdown component in Vue
Vue+canvas realizes a countdown plug-in with cool clock effects (a vue2 plug-in that has been published to npm and can be used out of the box)

<<: Introduction to adding new users to MySql, creating databases for users, and assigning permissions to users

>>: Docker container monitoring and log management implementation process analysis

How to configure multiple tomcats with Nginx load balancing under Linux

Understand the rendering process of HTML pages in preparation for learning front-end performance optimization (continued)

Blog

js implements the classic minesweeper game

Vue implements a small countdown function

How to configure multiple tomcats with Nginx load balancing under Linux

Tomcat server security settings method

The perfect solution for highlighting keywords in HTML

How to configure Nginx to split traffic based on the last segment of the request IP

Detailed explanation of the problem when combining CSS ellipsis and padding

Understand the rendering process of HTML pages in preparation for learning front-end performance optimization (continued)

js implements the classic minesweeper game

Comprehensive inventory of important log files in MySQL

Lombok implementation JSR-269

Introduction to MySQL isolation level, lock and MVCC

Recommend

Vue+Openlayer uses modify to modify the complete code of the element

Detailed explanation of Vue routing router

JavaScript implements Tab bar switching effects

An example of using CSS methodologies to achieve modularity

Getting Started with Nginx Reverse Proxy

Detailed explanation of how MySQL determines whether an InnoDB table is an independent tablespace or a shared tablespace

How to write the style of CSS3 Tianzi grid list

Vue3 implements Message component example

MySQL performance optimization: how to use indexes efficiently and correctly

Use CSS and Bootstrap icons to create an up and down jumping indicator arrow animation effect

Summary of all HTML interview questions

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

An example of changing traditional replication to GTID replication without stopping business in MySQL 5.7

mysql update case update field value is not fixed operation

Detailed explanation of the use of mysql explain (analysis index)