Vue实现倒计时小功能
更新时间：2021年09月14日 08:35:49 作者：王冰涛涛涛
这篇文章主要为大家详细介绍了Vue实现倒计时小功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
很多项目中都需要实现倒计时功能，例：发送验证码。现在举例实现一个简单的倒计时按钮功能。简单布局，简单操作，简单效果，最主要的是思路和倒计时步骤理解！！！
例、代码如下：
要求：点击提交按钮倒计时五秒，倒计时期间输入框和提交按钮禁用，倒计时结束后输入框和提交按钮再变成正常状态
1、先实现要求的html布局，添加点击事件
<div>
<!-- disabled为true禁用 -->
输入框：<input type="text" :disabled="istrue">
<button @click="addHandle" :disabled="istrue">提交</button>
<!-- 倒计时文字提示 -->
<p>{{this.txt}}</p>
</div>
2、点击提交按钮倒计时开始变禁用状态，定义一个计时器
<script>
export default {
data(){
return {
txt:'',
istrue:false,
inp:''
}
},
methods:{
addHandle(){
//定义n=5秒
let n=5
//定义定时器time
let time=setInterval(()=>{
//禁用
this.istrue=true
//改变倒计时文字提示
this.txt=n+'秒后提交'
n--
//如果n<0，清除定时器，禁用状态取消，文字提示为空（不显示）
if(n<0){
this.txt=""
this.istrue=false
clearInterval(time)
}
},1000)
}
}
}
</script>
思路步骤都写在上方注释里了，一个简单的倒计时就这样轻易实现了。
整体代码：
<template>
<div>
<!-- disabled为true禁用 -->
输入框：<input type="text" :disabled="istrue">
<button @click="addHandle" :disabled="istrue">提交</button>
<!-- 倒计时文字提示 -->
<p>{{this.txt}}</p>
</div>
</template>
<script>
export default {
data(){
return {
txt:'',
istrue:false,
inp:''
}
},
methods:{
addHandle(){
//定义n=5秒
let n=5
//定义定时器time
let time=setInterval(()=>{
//禁用
this.istrue=true
//改变倒计时文字提示
this.txt=n+'秒后提交'
n--
//如果n<0，清除定时器，禁用状态取消，文字提示为空（不显示）
if(n<0){
this.txt=""
this.istrue=false
clearInterval(time)
}
},1000)
}
}
}
</script>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue 修改vant自带的样式过程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了Vue结合后台导入导出Excel问题详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
这篇文章主要介绍了vue后台返回base64图片无法显示的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
这篇文章主要介绍了Vue终端取消vue、prettier警告warn问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了vue中使用vant的Toast轻提示报错的解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
这篇文章主要介绍了Element Steps步骤条的使用方法,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
这篇文章主要给大家介绍了关于Vue项目启动白屏问题的几种解决办法,Vue项目打包后出现白屏的可能原因有很多,文中通过图文介绍的非常详细,需要的朋友可以参考下2023-12-12
这篇文章主要为大家详细介绍了Vue实现图书管理案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-01-01
下面小编就为大家分享一篇iview table高度动态设置方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了在Vue中如何使用Cookie操作实例的相关资料,需要的朋友可以参考下2017-07-07
最新评论