Vue验证码60秒倒计时功能简单实例代码

那么我们来逐步讲解如何使用Vue实现验证码60秒倒计时功能的步骤和代码实现。

步骤一：安装Vue

首先，需要安装Vue，可通过以下命令安装：

npm install vue

步骤二：创建Vue实例

在HTML页面中引入Vue库后，需创建Vue实例，用于管理页面数据和操作行为：

const vueApp = new Vue({
  el: '#app',
  data: {
    second: 60, // 倒计时时长
    timer: null, // 定时器
    disabled: false, // 是否禁用按钮
  },
  methods: {
    countdown() { // 倒计时方法
      this.disabled = true; // 禁用按钮
      this.timer = setInterval(() => {
        if (this.second <= 0) {
          clearInterval(this.timer); // 清除定时器
          this.disabled = false; // 启用按钮
          this.second = 60; // 重置倒计时时长
        } else {
          this.second--; // 减少倒计时时间
        }
      }, 1000)
    },
    getCode() { // 获取验证码
      if (this.disabled) return;  
      // 发送验证码的请求代码省略
      this.countdown(); // 调用倒计时方法
    }
  }
})

步骤三：编写HTML模板

在Vue实例中，再编写HTML模板，用于展示页面和绑定事件：

<div id="app">
  <button @click="getCode" :disabled="disabled">{{ disabled ? second + 's后重试' : '获取验证码' }}</button>
</div>

在模板中，可以通过Vue的事件绑定方式（@click）来绑定获取验证码的按钮事件，同时根据状态来控制按钮的禁用状态和显示内容。

示例一： 使用axios请求验证码

methods: {
  countdown() { // 倒计时方法
    this.disabled = true; // 禁用按钮
    this.timer = setInterval(() => {
      if (this.second <= 0) {
        clearInterval(this.timer); // 清除定时器
        this.disabled = false; // 启用按钮
        this.second = 60; // 重置倒计时时长
      } else {
        this.second--; // 减少倒计时时间
      }
    }, 1000)
  },
  getCode() { // 获取验证码
    if (this.disabled) return;
    axios.get('/get-code').then((response) => {
      console.log(response) // 打印验证码请求返回结果
      // 请求成功后，调用倒计时方法
      this.countdown(); 
    }).catch((error) => {
      console.log(error) // 打印验证码请求错误信息
    })
  }
}

示例二： 使用fetch请求验证码

methods: {
  countdown() { // 倒计时方法
    this.disabled = true; // 禁用按钮
    this.timer = setInterval(() => {
      if (this.second <= 0) {
        clearInterval(this.timer); // 清除定时器
        this.disabled = false; // 启用按钮
        this.second = 60; // 重置倒计时时长
      } else {
        this.second--; // 减少倒计时时间
      }
    }, 1000)
  },
  getCode() { // 获取验证码
    if (this.disabled) return;
    fetch('/get-code').then((response) => {
      console.log(response) // 打印验证码请求返回结果
      // 请求成功后，调用倒计时方法
      this.countdown(); 
    }).catch((error) => {
      console.log(error) // 打印验证码请求错误信息
    })
  }
}

以上就是使用Vue实现验证码60秒倒计时功能的完整攻略，希望可以对您有所帮助。