怎么在Vue中实现一个倒计时按钮功能？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。
创新互联专注为客户提供全方位的互联网综合服务，包含不限于
成都做网站、成都网站建设、裕民网络推广、
微信小程序、裕民网络营销、裕民企业策划、裕民品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们大的嘉奖；
创新互联为所有大学生创业者提供
裕民建站搭建服务，24小时服务热线：028-86922220，官方网址：www.cdcxhl.com
{{content}}
...
data () {
return {
content: '发送验证码', // 按钮里显示的内容
totalTime: 60 //记录具体倒计时时间
}
},
methods: {
countDown() {
let clock = window.setInterval(() => {
this.total--
this.content = this.total + 's后重新发送'
},1000)
}
}
在data里加了两条数据，一条用来记录时间，一条用来盛放倒计时按钮的具体内容。在countDown函数里我们用了setInterval定时器，每隔一秒totalTime减1，同时更改按钮里显示的内容。 在window.setInterval里用了箭头函数，因为它会自动绑定外面的this，所以就不用先存下this了。
效果如下图：
但是这个按钮还有一些问题：
点击了按钮之后过了1秒就直接从59秒开始倒计时了，中间的60不见了
倒计时的时候还可以点击
还没有清除倒计时
接下来需要继续完善countDown函数来解决这些问题。
countDown () {
this.content = this.totalTime + 's后重新发送' //这里解决60秒不见了的问题
let clock = window.setInterval(() => {
this.totalTime--
this.content = this.totalTime + 's后重新发送'
if (this.totalTime < 0) { //当倒计时小于0时清除定时器
window.clearInterval(clock)
this.content = '重新发送验证码'
this.totalTime = 60
}
},1000)
},上面的代码解决了60不见的问题，同时当totalTime小于0时清除同时器、重新设置按钮里的content、将totalTime重置为60以便下次使用。
倒计10秒的效果：
发现bug，多次点击之后，倒讲时速度变快，这是因为每次点击都会启动一个setInterval，这些setInterval都会减少totalTime。解决的方法也很简单：简单节流一下就好了，就是第一次点击按钮之后让countDonw这个函数的代码不可执行，等到倒计时结束之后才可以再次执行。
data () {
return {
content: '发送验证码',
totalTime: 10,
canClick: true //添加canClick
}
}
...
countDown () {
if (!this.canClick) return //改动的是这两行代码
this.canClick = false
this.content = this.totalTime + 's后重新发送'
let clock = window.setInterval(() => {
this.totalTime--
this.content = this.totalTime + 's后重新发送'
if (this.totalTime < 0) {
window.clearInterval(clock)
this.content = '重新发送验证码'
this.totalTime = 10
this.canClick = true //这里重新开启
}
},1000)
}在data里添加canClick，默认是true，如果canClick为true，countDown里的代码可以执行，如果是false就不行。每执行一次就将canClick设为false，而只在倒计时结束的时候再改为true。这样刚才的问题就没有了。
到这里其实就差不多了，不过还可以调整下样式：
...
.disabled{
background-color: #ddd;
border-color: #ddd;
color:#57a3f3;
cursor: not-allowed; // 鼠标变化
}
Vue的优点
Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势，Vue中页面使用的是局部刷新，不用每次跳转页面都要请求所有数据和dom，可以大大提升访问速度和用户体验。
看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注创新互联成都网站设计公司行业资讯频道，感谢您对创新互联成都网站设计公司的支持。
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、网站设计器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
分享题目：怎么在Vue中实现一个倒计时按钮功能-创新互联
本文来源：
http://cdkjz.cn/article/deiojg.html
