Vue验证码60秒倒计时功能简单实例代码

template

<template>
 <div class='login'>
 <div class="loginHeader">
 <input type="tel" class="loginBtn border-bottom" placeholder="请输入手机号" />
 <input type="tel" class="codeBtn" placeholder="请输入验证码" />
 <input type="button" class="getNumber" v-model="codeMsg" @click="getCode" :disabled="codeDisabled" />
 </div>
 </div>
</template>

script

<script>
 export default {
 data() {
 return {
 // 是否禁用按钮
 codeDisabled: false,
 // 倒计时秒数
 countdown: 60,
 // 按钮上的文字
 codeMsg: '获取验证码',
 // 定时器
 timer: null
 }
 },

 methods: {
 // 获取验证码
 getCode() {
 // 验证码60秒倒计时
 if (!this.timer) {
 this.timer = setInterval(() => {
 if (this.countdown > 0 && this.countdown <= 60) {
 this.countdown--;
 if (this.countdown !== 0) {
 this.codeMsg = "重新发送(" + this.countdown + ")";
 } else {
 clearInterval(this.timer);
 this.codeMsg = "获取验证码";
 this.countdown = 60;
 this.timer = null;
 this.codeDisabled = false;
 }
 }
 }, 1000)
 }
 }
 }
 }
</script>

css（scss写法）

<style>
.login{
 width: 100%;
 height: 100%;
 background: #F9F9F9;
 .loginHeader{
 padding: 0 10px;
 background: #fff;
 margin-top: 20px;
 overflow: hidden;
 .loginBtn{
 width: 100%;
 height: 42px;
 border: none;
 background: #fff;
 color: #444;
 border-radius: 4px;
 outline: none;
 padding-left: 3px;
 font-size: 1.4rem;
 box-sizing: border-box;
 -webkit-appearance:none;
 }
 .border-bottom{
 border-bottom: 1px solid #F3F3F3;
 }
 .codeBtn{
 width: 63%;
 height: 42px;
 border: none;
 background: #fff;
 color: #444;
 border-radius: 4px;
 float: left;
 outline: none;
 padding-left: 3px;
 font-size: 1.4rem;
 box-sizing: border-box;
 -webkit-appearance:none;
 }
 .getNumber{
 width: 35%;
 height: 36px;
 float: right;
 margin-top: 3px;
 border: 1px solid #09BB07;
 color: #09BB07;
 background: #fff;
 border-radius: 4px;
 outline: none;
 -webkit-appearance:none;
 }
 }
}
</style>

总结

以上所述是小编给大家介绍的Vue验证码60秒倒计时功能简单实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！