博客首页

vue获取验证码

2019年10月16日
未分类  作者:跨屏互联  浏览:15

文 | 跨屏互联

html

<span v-show="show" @click="getCode">获取验证码</span>

<span v-show="!show" class="count">{{count}} s</span>

js

data(){

return {

show: true,

count: '',

timer: null,

}

},

methods:{

getCode(){

const TIME_COUNT = 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)

}

}

}

html

1
2
<span v-show="show" @click="getCode">获取验证码</span>
<span v-show="!show" class="count">{{count}} s</span>

js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
data(){
  return {
   show: true,
   count: '',
   timer: null,
  }
 },
 methods:{
   getCode(){
     const TIME_COUNT = 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)
      }
   } 
 }

---END---

申明:若有来源错误或者侵犯您的合法权益,您可以通过邮箱与我们取得联系,我们将及时进行处理,邮箱地址:info@kuaping.com

#暂无标签

相关推荐

如果你连构建一个标准的独立站都成问题, 还谈什么SEO?

立即沟通

回归第一性原理
洞察独立站本质

微信客服

aming,建站从业生涯(2007~2025),加微信好友备注(跨屏互联)

关注抖音

aming,建站从业生涯(2007~2025),分享Wordpress知识

电话沟通

027-81777732

回到顶部