vue制作发送验证码倒计时代码验证码倒计时

最新推荐文章于 2024-06-11 07:57:19 发布

原创

最新推荐文章于 2024-06-11 07:57:19 发布 · 693 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

本文介绍了如何在Vue.js项目中实现发送验证码后的倒计时功能，包括HTML结构、Vue组件的数据属性设置以及JavaScript逻辑代码。通过此教程，读者可以掌握在前端验证中运用Vue进行动态时间显示的方法。

html代码：

 <label id="sendCode"  @click="countdowm" style="line-height:40px;margin-left:10px;cursor:pointer;">
              {
  
  {content}}
            </label>

data参数：

 data() {
    return {
      content: "发送验证码",
      canClick: true,
      refreshData: null
    };
  },

js代码：

//发送手机验证码
        countdowm() {
        let totalTime = 60;
        if (!this.canClick) return; //节流
        this.canClick = false;
        this.content = totalTime + "s重新发送";
        $('#sendCode button').attr('disabled',true);
        
        this.refreshData = window.setInterval(() => {
          totalTime--;
          this.content = totalTime + "s重新发送";
          if (totalTime < 0) {