使用vue 写一个简单的60s倒计时

在项目开发里，我们经常会遇到发送验证码、点击了之后有60秒倒计时的按钮,下面就看一下代碼如何写？

<el-button @click="getCountdown" :disabled="totalTime <60">{{content}}</el-button>
            
export default {
    data() {
        return {
            totalTime: 60,
            content: "发送验证码"
        }
    },
    methods: {
        getCountdown() {
            let clock =  window.setInterval(() => {
                this.content = this. totalTime + 's后重新发送';
                this.totalTime --;
                if(this. totalTime < 0){
                    this. totalTime = 60;
                    this.content = "重新发送验证码";
                    window.clearInterval(clock);
                }
            }, 1000);
        }
    },
}

在data里分别用content和totalTime来记录内容和时间减1的操作，在countDown函数里我们用了setInterval定时器，每隔一秒totalTime减1，同时更改按钮里显示的内容。在window.setInterval里用了箭头函数，因为它会自动绑定外面的this，所以就不用先存下this了

如图所示：

image.png
image.png
image.png

设置button 的disabled是为了防止多次点击出现倒计时速度变快的问题。