使用vue 写一个简单的60s倒计时 |
您所在的位置：网站首页 › vue实现倒计时组件 › 使用vue 写一个简单的60s倒计时 |
|
在项目开发里，我们经常会遇到发送验证码、点击了之后有60秒倒计时的按钮,下面就看一下代碼如何写？ {{content}} export default { data() { return { totalTime: 60, content: "发送验证码" } }, methods: { getCountdown() { let clock = window.setInterval(() => { this.content = this. totalTime + 's后重新发送'; this.totalTime --; if(this. totalTime < 0){ this. totalTime = 60; this.content = "重新发送验证码"; window.clearInterval(clock); } }, 1000); } }, }在data里分别用content和totalTime来记录内容和时间减1的操作，在countDown函数里我们用了setInterval定时器，每隔一秒totalTime减1，同时更改按钮里显示的内容。在window.setInterval里用了箭头函数，因为它会自动绑定外面的this，所以就不用先存下this了 如图所示： image.png image.png image.png设置button 的disabled是为了防止多次点击出现倒计时速度变快的问题。 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |