直接上代碼(首先引入vue.js,下載地址)
1铅檩、html部分

<div id="container">
        <input type="text" v-model="mobile" placeholder="輸入手機(jī)號(hào)">
        <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('手機(jī)號(hào)不能為空');
                return false;
            }
            if(!/^1[3|4|5|7|8]\d{9}$/.test(this.mobile)){
                console.log('手機(jī)號(hào)格式不正確');
                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);
            
            //在這里調(diào)取你獲取驗(yàn)證碼的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 '獲取驗(yàn)證碼';
            }
            
        },
    }
})

4焦蘑、最終效果圖

20171027161802.png

20171027161820.png