vue实现验证码倒计时

直接上代码(首先引入vue.js,下载地址)
1、html部分

<div id="container">
        <input type="text" v-model="mobile" placeholder="输入手机号">
        <a class="get_num " v-bind:class="{gray:wait_timer>0}"  @click='getMobileCode()'>{{ getMobileCodeText() }}</a>
    </div>

2、css部分

        input{
            font-size: 16px;
            padding: 4px;
            -webkit-tap-highlight-color:transparent;
            outline-style: none;
            list-style: none;
        }
        .get_num{
            width: 78px;
            height: 30px;
            font-size: 13px;
            color: white;
            display: block;
            background: #3bc987;
            border-radius: 4px;
            text-align: center;
            line-height: 30px;
            margin-top: 8px;
        }
        .get_num.gray{
            background: #c8c8c8;
        }

2、css部分

  input{
            font-size: 16px;
            padding: 4px;
            -webkit-tap-highlight-color:transparent;
            outline-style: none;
            list-style: none;
        }
        .get_num{
            width: 78px;
            height: 30px;
            font-size: 13px;
            color: white;
            display: block;
            background: #3bc987;
            border-radius: 4px;
            text-align: center;
            line-height: 30px;
            margin-top: 8px;
        }
        .get_num.gray{
            background: #c8c8c8;
        }

3、js部分

var vm = new Vue({
    el: '#container',
    data:{
        mobile:'',
        wait_timer:false,
    },
    created:function(){
        
    },
    methods:{
        getMobileCode:function(){
            if (this.wait_timer > 0) {
                return false;
            }
            if (!this.mobile) {
                console.log('手机号不能为空');
                return false;
            }
            if(!/^1[3|4|5|7|8]\d{9}$/.test(this.mobile)){
                console.log('手机号格式不正确');
                return false;
            }
            
            this.wait_timer = 59;
            var that = this;
            var timer_interval = setInterval(function(){
                if(that.wait_timer > 0){
                    that.wait_timer -- ;
                }else{
                    clearInterval(timer_interval);
                }
            },1000);
            
            //在这里调取你获取验证码的ajax
               
        },
        getMobileCodeText:function(){
            if(this.wait_timer > 0){
                return this.wait_timer+'s后获取';
            }
            
            if(this.wait_timer === 0){
                return '重新获取';
            }
            
            if(this.wait_timer === false){
                return '获取验证码';
            }
            
        },
    }
})

4、最终效果图

20171027161802.png 20171027161820.png