欢迎光临
我们一直在努力

vue验证码发送倒计时

直接上代码

<span v-show="show" @click="getCode">获取验证码</span>
<span v-show="!show" class="count">{{count}} s</span>

 

    data () {
        return {
            show: true,
            count: '',
            timer: null
        }
    },
    methods: {
        getCode () {
            const TIME_COUNT = 60
            if (!this.timer) {
                this.count = TIME_COUNT
                this.show = false
                this.timer = setInterval(() => {
                    if (this.count > 0 && this.count <= TIME_COUNT) {
                        this.count--
                    } else {
                        this.show = true
                        clearInterval(this.timer)
                        this.timer = null
                    }
                }, 1000)
            }
        }
    },

 

赞(0)
版权归原作者所有,如有侵权请告知。达维营-前端网 » vue验证码发送倒计时

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址