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:
|
>>: Docker container monitoring and log management implementation process analysis
Recommend
Solution to the ineffective global style of the mini program custom component
Table of contents Too long to read Component styl...
Zabbix redis automatic port discovery script returns json format
When we perform automatic discovery, there is alw...
Detailed tutorial on deploying Springboot or Nginx using Kubernetes
1 Introduction After "Maven deploys Springbo...
MySql COALESCE function usage code example
COALESCE is a function that refers to each parame...
Summary of common commands for building ZooKeeper3.4 middleware under centos7
1. Download and decompress 1. Introduction to Zoo...
Vue3.0 adaptive operation of computers with different resolutions
First we need to install some dependencies npm i ...
Experience sharing by a front-end supervisor with 7 years of practical experience
Today, I am sharing the valuable experience of a ...
How to configure two-way certificate verification on nginx proxy server
Generate a certificate chain Use the script to ge...
Example of making a butterfly flapping its wings with pure CSS3
Pure CSS3 makes a butterfly flapping its wings, s...
An article to quickly understand Angular and Ionic life cycle and hook functions
Table of contents Angular accomplish Calling orde...
Vue-router does not allow navigation to the current location (/path) Error reasons and fixes
Table of contents Error message Cause Error demon...
IE conditional comments for XHTML
<br />Conditional comments are a feature uni...
Detailed explanation of the flexible use of CSS grid system in projects
Preface CSS grids are usually bundled in various ...
MySQL compression usage scenarios and solutions
Introduction Describes the use cases and solution...
Vue implements zip file download
This article example shares the specific code of ...