vue获取验证码

coodingcc

于 2018-08-21 11:18:12 发布

阅读量1.9k

点赞数

分类专栏：前端 vue Vue

本文链接：https://blog.csdn.net/cristina_song/article/details/81904391

版权

前端同时被 3 个专栏收录

93 篇文章 1 订阅

订阅专栏

Vue

11 篇文章 1 订阅

订阅专栏

vue

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue起步学习</title>
    <script src="./js/vue.min.js"></script>
</head>
<style type="text/css">

</style>
<body>
    <p id="root"><input type="text" placeholder="图片验证码"> <i @click="getCode">{{yzm}}</i></p>
</body>
</html>
<script type="text/javascript">
    new Vue({
        el: '#root',
        data(){
            return{
                yzm:'获取验证码'
            }
        },
        methods:{
            getCode:function(){
                if(this.yzm=='获取验证码'){
                    const TIME_COUNT = 5;
                    if (!this.timer) {
                        this.yzm = TIME_COUNT;
                        this.show = false;
                        this.timer = setInterval(() => {
                            if (this.yzm > 0 && this.yzm <= TIME_COUNT) {
                                this.yzm--;
                            } else {
                                this.show = true;
                                clearInterval(this.timer);
                                this.timer = null;
                            }if (this.yzm ==0){
                                this.yzm="获取验证码"
                            }
                        }, 1000)
                    }
                }
            }

        }

    })
</script>