vue 倒计时获取验证码效果

最新推荐文章于 2024-06-11 07:57:19 发布

WinterWang0207

最新推荐文章于 2024-06-11 07:57:19 发布

阅读量313

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 案例

本文链接：https://blog.youkuaiyun.com/weixin_38404899/article/details/90698051

Vue 案例专栏收录该内容

91 篇文章

订阅专栏

博客主要展示了代码实现的效果，虽未给出具体代码内容，但围绕代码及其呈现效果展开，属于信息技术领域中代码相关内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果：

代码：

<template>
    <div>
      <el-button :disabled="disabled" @click="sendcode" class="sendcode">{{btntxt}}</el-button>
    </div>
</template>

 <script>
export default {
        data() {
            return {
                disabled:false,
                time:5,
                btntxt:"发送验证码",
            };
        },
        methods: {
            sendcode(){
                this.time=5;
                this.timer();   
            },
            //发送手机验证码倒计时
            timer() {
                if (this.time > 0) {
                    this.disabled=true;
                     this.time--;
                     this.btntxt=this.time+"秒";
                     setTimeout(this.timer, 1000);
                } else{
                     this.time=0;
                     this.btntxt="发送验证码";
                     this.disabled=false;
                }
            },
        }
}
</script>

<style scoped>
.el-button{
    margin: 100px 50px;
}
</style>