注册组件
先导入，再使用

<template>

    <span class="count_info btn btn-default" :class="{'btn-info': !code_sended}">
        <span v-show="show" @click="getCode">获取验证码</span>
        <span v-show="!show" class="count">{{count}} s</span>
    </span>

</template>

<script>
    export default {
        name: "verify_code_couter",
        data() {
            return {
                show: true,
                count: '',
                timer: null,
                code_sended: false
            }
        },
        methods: {
            getCode() {
                this.code_sended = true;
                const TIME_COUNT = 60;
                if (!this.timer) {
                    this.count = TIME_COUNT;
                    this.show = false;
                    this.timer = setInterval(() => {
                        if (this.count > 0 && this.count <= TIME_COUNT) {
                            this.count--;
                        } else {
                            this.show = true;
                            clearInterval(this.timer);
                            this.timer = null;
                            this.code_sended = false;
                        }
                    }, 1000)
                }
            }
        }
    }
</script>

<style scoped>
    .count_info{
        padding: 0 10px;
        width: 100px;
        text-align: center;
    }
</style>