vue点击按钮后倒计时

vue代码

<template>
  <div>
    <!-- 点击按钮后倒计时 -->
    <el-button @click="signUp_asd" type="success" :disabled="!show">
      获取验证码
      <span v-show="!show" class="count">({{count}}s)</span>
    </el-button>
  </div>
</template>

<script>
const TIME_COUNT = 30; //更改倒计时时间
export default {
  mounted() {},
  name: "MyApp",
  data() {
    return {
      //60秒验证码发送
      show: true, // 初始启用按钮
      count: "", // 初始化次数
      timer: null,
      form: {
        code: ""
      }
    };
  },
  methods: {
    signUp_asd() {
      //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;
          }
        }, 1000);
      }
    }
  }
};
</script>

 
<style scoped>
</style>

　效果