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,记录一下碰到的问题,下面这篇文章主要给大家介绍了关于Vue项目中接口调用的详细讲解,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-07-07
Vue对Element中el-tab-pane添加@click事件无效问题解决
这篇文章主要给大家介绍了关于Vue对Element中el-tab-pane添加@click事件无效问题的解决办法,文中通过图文以及代码示例介绍的非常详细,需要的朋友可以参考下2023-07-07
本文主要介绍了vue3使用flv.js播放推流视频的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
vue perfect-scrollbar(特定框架里使用非该框架定制库/插件)
这篇文章主要为大家介绍了vue perfect-scrollbar在特定框架里使用一款并非为该框架定制的库/插件如何实现，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪<BR>2023-05-05
这篇文章主要为大家详细介绍了vue2.0实现音乐和视频播放进度条组件的思路及具体实现方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-06-06
Vue Router 是 Vue.js 的官方路由,它与 Vue.js 核心深度集成,让用 Vue.js 构建单页应用变得轻而易举,这篇文章主要介绍了Vue Router的介绍与引入,需要的朋友可以参考下2024-01-01
今天小编就为大家分享一篇Vue 应用中结合vux使用微信 jssdk的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
Vue项目部署在Spring Boot出现页面空白问题的解决方案
这篇文章主要介绍了Vue项目部署在Spring Boot出现页面空白问题的解决方案,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-11-11
这篇文章主要介绍了vue一直自动换行的问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
在使用Vue2开发移动端页面的时候,需要做一个效果,实现的方案是背景渐变,但是想要实现这个效果就必须进行定位,我的背景高度需要在一个十分恰当的位置,但是我的图片会随着移动端页面的变化而发生高度的变化,为什么会变化？所以本文介绍了Vue中获取图片高度的方法2024-08-08
最新评论