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

最新推荐文章于 2024-08-21 23:00:24 发布

子轩.y

最新推荐文章于 2024-08-21 23:00:24 发布

阅读量606

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/yangshanghao/article/details/129522711

版权

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

摘要由CSDN通过智能技术生成

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(()