点击发送验证码(防止产生多个定时器)

<div id="app">
   <div @click="goCode">
      {{shortMessage}}
   </div> 
</div>

<script>
new Vue({
    el: '#app',
    data() {
        return {
            timer: null,
            chishitime: 60,
            shortMessage: "获取手机验证码",
        };
    },
    methods: {
        goCode() {
            if (!this.timer) {
                this.shortMessage = "60s后重新发送"; //页面一开始就显示60s后重新发送.
                this.timer = setInterval(() => {
                    if (this.chishitime > 0) {
                        this.chishitime--;
                        console.log("定时器在执行");
                        this.shortMessage = this.chishitime + "s后重新发送";
                    } else {
                        clearInterval(this.timer);
                        this.shortMessage = "获取手机验证码";
                        this.timer = null;
                        this.chishitime = 60;
                    }
                }, 1000);
            }
        },
    },
    beforeDestroy() {
        clearInterval(this.timer);
    }
})
</script>