vue 发送验证码 倒计时1分钟

数据绑定文字

<div class="HTtx32" @click="Yanma">{{Ytxfont}}</div>

data中定义

 data() {
    return {
      Ytxfont: "发送验证码",
      Traem: true
    };
  },

methods中 触发点击事件 判断 Traem true 或 false 进行状态判断 启动倒计时 和 清除倒计时 改变 Ytxfont 的文字内容 此方法 为es6 拼接字符串

Yanma() {
      if (this.Traem) {
        this.Traem = false;
        let langtime =60;
        let than=this
        let a = setInterval(function() {
          if (langtime == 0) {
            than.Traem = true;
            than.Ytxfont = "发送验证码";
            clearInterval(a);
          } else {
            langtime--;
            console.log(langtime);
            than.Ytxfont = `倒计时${langtime}秒`;
          }
        }, 1000);
      } else {
        console.log("不能点了")
      }
    },

清晰明了