脚本宝典收集整理的这篇文章主要介绍了Vue实现倒计时小功能，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
很多项目中都需要实现倒计时功能，例：发送验证码。现在举例实现一个简单的倒计时按钮功能。简单布局，简单操作，简单效果，最主要的是思路和倒计时步骤理解！！！
例、代码如下：
要求：点击提交按钮倒计时五秒，倒计时期间输入框和提交按钮禁用，倒计时结束后输入框和提交按钮再变成正常状态
<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实现倒计时小功能全部内容，希望文章能够帮你解决Vue实现倒计时小功能所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。