vue實現倒計時獲取驗證碼效果
更新時間：2020年04月17日 15:57:28 作者：小羽向前跑
這篇文章主要為大家詳細介紹了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>
更多關于倒計時的文章請查看專題：《倒計時功能》
更多JavaScript時鐘特效點擊查看：JavaScript時鐘特效專題
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
本篇文章主要介紹了淺談Vue SSR 的 Cookies 問題，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
今天小編就為大家分享一篇vue 返回上一頁,頁面樣式錯亂的解決，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了vue?如何根據條件判斷屬性的添加和去除，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-01-01
這篇文章主要介紹了vue中如何攜帶參數跳轉頁面問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
在使用服務器端渲染時，除了服務端的接口緩存、頁面緩存、組建緩存等，瀏覽器端也避免不了要使用緩存，減少頁面的重繪。這篇文章主要介紹了詳解vue服務端渲染瀏覽器端緩存（keep-alive），感興趣的小伙伴們可以參考一下2018-10-10
在本篇文章里小編給大家分享的是關于vuex入門最詳細整理的相關內容，需要的朋友們參考下。2020-03-03
這篇文章給大家介紹了vue中使用moment設置倒計時的方法,文中通過代碼示例給大家介紹的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下2024-02-02
這篇文章主要介紹了Vue是怎么渲染template內的標簽內容的，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-06-06
這篇文章主要介紹了vue中輸入框事件的使用及數值校驗方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
在本篇文章里小編給大家分享的是關于Vue.js watch監(jiān)視屬性的相關知識點內容，需要的朋友們學習下。2019-11-11