vue倒计时60s获取验证码详细版代码

vue其实是个利器，再开发中为我们省去了很多力气，再开发中经常用到的板块，如果每次都去重新写，那也太费力了，这里整理了倒计时60s的代码，思路比较简单，请求了后台的接口。需要的可以拿去作为自己的参考

> html代码部分

```
<button v-show="show" @click="getCode()" type="button" id="getCodeBtn" class="layui-btn layui-btn-sm layui-btn-primary">
                        获取验证码
 </button>
<span v-show="!show" class="layui-btn layui-btn-sm layui-btn-primary">
   {{count}}
 </span>
```

> vue js代码部分

```
/**
 * Created by Administrator on 2020/7/9.
 */
var login = new Vue({
    el: '#login',
    data: {

phone:'',
        password:'', 
        code:'',
        show: true,
        count: '',
        timer: null,

}
    ,methods: {
        getCode:function () {
            if(!this.phone){
                error("手机号不能为空");
                return false
            }
            var url = api_getCode_url;
            var _self = this
            layer.load()
            $.post(url,{phone:_self.phone},function (e) {
                layer.closeAll()
                if(e.code ==0){
                    const TIME_COUNT = 60;
                    if (!_self.timer) {
                        _self.count = TIME_COUNT;
                        _self.show = false;
                        _self.timer = setInterval(() => {
                                if (_self.count > 0 && _self.count <= TIME_COUNT) {
                            _self.count--;
                        } else {
                            _self.show = true;
                            clearInterval(_self.timer);
                            _self.timer = null;
                        }
                    }, 1000)
                    }

}else {
                    error("请稍后再试");
                }
            })
        }

},
    mounted:function(){
        //页面挂载需要运行的函数
    }
})
```

注:原创不易,转载请注明出处( https://micuu.com/new/946.html )，本站所有资源来源于网络收集，如有侵权请联系QQ245557979进行清除。