溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

vue實現倒計時獲取驗證碼效果的方法

發(fā)布時間：2020-08-03 09:56:44 來源：億速云 閱讀：216 作者：小豬 欄目：web開發(fā)

這篇文章主要講解了vue實現倒計時獲取驗證碼效果的方法，內容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。

效果：

vue實現倒計時獲取驗證碼效果的方法

代碼：

<template>
 <div>
 <el-button :disabled="disabled" @click="sendcode" class="sendcode">{{btntxt}}</el-button>
 </div>
</template>
 
 <script>
export default {
 data() {
 return {
 disabled:false,
 time:5,
 btntxt:"發(fā)送驗證碼",
 };
 },
 methods: {
 sendcode(){
 this.time=5;
 this.timer(); 
 },
 //發(fā)送手機驗證碼倒計時
 timer() {
 if (this.time > 0) {
  this.disabled=true;
  this.time--;
  this.btntxt=this.time+"秒";
  setTimeout(this.timer, 1000);
 } else{
  this.time=0;
  this.btntxt="發(fā)送驗證碼";
  this.disabled=false;
 }
 },
 }
}
</script>
 
<style scoped>
.el-button{
 margin: 100px 50px;
}
</style>

看完上述內容，是不是對vue實現倒計時獲取驗證碼效果的方法有進一步的了解，如果還想學習更多內容，歡迎關注億速云行業(yè)資訊頻道。

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。

AI
助
手