vue实现倒计时验证码

<div class="share2-form-control" id="identify"><div class="identify-box"><input type="text" class="share2-form-control-input" style="width: 100px;" value="" placeholder="请输入验证码"><span v-show="sendAuthCode" class="identify" @click="getAuthCode">获取验证码</span><span v-show="!sendAuthCode" class="identify">@{{auth_time}}s</span></div>
</div>
<script>var vm = new Vue({el: "#identify",data: {sendAuthCode: true,/*布尔值，通过v-show控制显示‘获取按钮’还是‘倒计时’ */auth_time: 0,/*倒计时 计数器*/time_limit: 60,},watch: {mobilePhone: mobilePhone},methods: {getAuthCode: function() {this.sendSms();this.sendAuthCode = false;this.auth_time = this.time_limit;var auth_timetimer = setInterval(() = >{this.auth_time--;if (this.auth_time <= 0) {this.sendAuthCode = true;clearInterval(auth_timetimer);}},1000);console.log(this.auth_time)},sendSms: function() {axios.post('register/sms', {lastName: 'Flintstone'}).then(function(response) {console.log(response);}).catch(function(error) {console.log(error);});}}});</script>

参考了网上

vue实现倒计时验证码相关推荐

vue获取手机验证码60秒倒计时，不能点击按钮
vue获取手机验证码60秒倒计时,不能点击按钮 export const resend = element => {console.log(element)var num = 60var tim ...
前端Vue实现手机号验证码登录（60s禁用倒计时）
这篇文章主要介绍了Vue实现手机号验证码登录(60s禁用倒计时),帮助大家更好的理解和使用vue,具有很好的参考价值,感兴趣的朋友可以了解下最近做了个vue项目,前端通过手机号验证码的方式登录,获取 ...
springboot+vue实现手机验证码功能
springboot+vue实现手机验证码功能榛子云短信平台用户中心注册登录(有免费的一条消息,剩下的需要买)(阿里云个人得备案) 在springboot中加入依赖,用到了redis,阿里的fast ...
vue实现倒计时定时器
前言本文章将发布vue实现倒计时定时器,可用于考试系统自动交卷.商城未付款倒计时取消订单等效果同时,如不清楚vue时间处理,可查看我上一个文章 vue时间处理倒计时定时器为了制作倒计时定时器, ...
vue IE下验证码无法显示解决方法
vue IE下验证码无法显示解决方法使用axios进行get请求,返回格式为文件流可以使用一下方法解决 axios({method: 'get',url: '/verifyCode/authImag ...
VUE简易图形验证码
VUE简易图形验证码直接进入正题一.安装indetify npm install identify 二.创建一个组件对是一个组件将下面代码直接复制进组件即可 <template>& ...
Vue实现倒计时组件(可自定义时间倒计时功能的组件)：
一.创建countDown.vue(倒计时组件): <template><span :endTime="endTime" :endText="endTe ...
vue获取手机验证码倒计时
现在有许多移动端登录是使用的是手机号码加验证码的方式登陆的,但是很多时候为了防止恶意获取短信验证码需要在前端做一些控制. 例如下列场景: 我们在前端写一个定时器函数,显然可以满足倒计时功能,但是页面被 ...
超简单！Vue 短信验证码组件开发详解
1. Vue 组件代码如下: Vue.component('timerBtn',{template: '<button v-on:click="run" :disabled= ...

vue实现倒计时验证码

vue实现倒计时验证码相关推荐

最新文章

热门文章