vue组件里的倒计时定时器,vue写倒计时一分钟
本文主要详细介绍了Vue倒计时功能的实现。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
很多项目都需要倒计时功能，比如发送验证码。现在，例如，实现一个简单的倒计时按钮功能。布局简单，操作简单，效果简单，最重要的是对思路和倒计时步骤的理解！
示例和代码如下：
要求：点击提交按钮倒计时五秒。倒计时期间，输入框和提交按钮将被禁用。倒计时结束后，输入框和提交按钮又会恢复正常。
1.首先，实现所需的html布局并添加点击事件。
差异
！- disabled为true表示禁用-
输入框：输入类型=文本:禁用=为真
button @ click= addhandle :disabled= is true submit/button
！-倒计时文本提示-
p{{this.txt}}/p
/div
2.单击提交按钮，开始进入禁用状态的倒计时，并定义一个计时器。
脚本
导出默认值{
data(){
返回{
文本：，
istrue:假，
inp:“”
}
},
方法：{
addHandle(){
//定义n=5秒
让n=5
//定义定时器时间
设time=setInterval(()={
//禁用
this.istrue=true
//更改倒计时文本提示
This.txt=n 以秒为单位提交
n -
//如果n0，定时器清零，禁用状态取消，文本提示为空(不显示)
如果(否){
this.txt=
this.istrue=false
清除间隔(时间)
}
},1000)
}
}
}
/脚本
步骤写在上面的注释里，简单的倒计时就能轻松实现。
整体代码：
模板
差异
！- disabled为true表示禁用-
输入框：输入类型=文本:禁用=为真
button @ click= addhandle :disabled= is true submit/button
！-倒计时文本提示-
p{{this.txt}}/p
/div
/模板
脚本
导出默认值{
data(){
返回{
文本：，
istrue:假，
inp:“”
}
},
方法：{
addHandle(){
//定义n=5秒
让n=5
//定义定时器时间
设time=setInterval(()={
//禁用
this.istrue=true
//更改倒计时文本提示
This.txt=n 以秒为单位提交
n -
//如果n0，定时器清零，禁用状态取消，文本提示为空(不显示)
如果(否){
this.txt=
this.istrue=false
清除间隔(时间)
}
},1000)
}
}
}
/脚本
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。