先看一下实际操作图例：

实现方法：

html部分：

<h3 style="text-align: center;padding:0 0 20px;">修改密码</h3>

            <el-form-item label="手机号">
                <div class="code_input">
                    <el-input v-model="ruleForm.phone" :disabled="true"></el-input>
                    <el-button size='mini' @click="send" v-if="isSend">发送验证码</el-button>
                    <el-button size='mini' v-if="!isSend">{{sendmsg}}</el-button>
                </div>
            </el-form-item>

js部分：

data() {
	return {
            sendmsg: '发送验证码',
            isSend: true,
}

        send() { 
            if (!this.ruleForm.phone) {
                Message.error("请填写手机号后获取验证码！");
            } else if (/^1(3|4|5|6|7|8)\d{9}$/.test(this.ruleForm.phone) == false) {
                Message.error("请填写正确的手机号后获取验证码！");
            } else {
                userApi.getCode(this.ruleForm.phone)
                    .then((res) => {
                        if ( res.data.resCode == "200") {
                            Message.success(res.data.msg)
                            this.isSend = false;
                            let timer = 60;
                            this.sendmsg = timer + "s";
                            this.timeFun = setInterval(() => {
                                --timer;
                                this.sendmsg = timer + "s";
                                if (timer == 0) {
                                    this.isSend = true;
                                    this.sendmsg = "重新发送";
                                    clearInterval(this.timeFun);
                                }
                            }, 1000);

                        }
                    });
            }
        },

要点：

1、点击发送后更改两个展示按钮的切换
2、切换前先进行本地信息的校验，其次进行接口请求的判断
3、倒计时样式实际是根据setInterval方法进行的，定义了一个timer

ps:定义了setInterval后要在结束后进行清除（clearInterval）