| 很多项目中都需要实现倒计时功能，例：发送验证码。现在举例实现一个简单的倒计时按钮功能。简单布局，简单操作，简单效果，最主要的是思路和倒计时步骤理解！！！ 例、代码如下： 要求：点击提交按钮倒计时五秒，倒计时期间输入框和提交按钮禁用，倒计时结束后输入框和提交按钮再变成正常状态 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>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持wanshiok.com。
vue 路由视图 router-view嵌套跳转的实现
npm设置同时从多个包源加载包的方法 |
