快捷導(dǎo)航

vue實(shí)現(xiàn)倒計(jì)時(shí)獲取驗(yàn)證碼效果

更新時(shí)間：2020年04月17日 15:57:28 作者：小羽向前跑

這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)倒計(jì)時(shí)獲取驗(yàn)證碼效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vue實(shí)現(xiàn)倒計(jì)時(shí)獲取驗(yàn)證碼效果的具體代碼，供大家參考，具體內(nèi)容如下

效果：

代碼：

<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ā)送驗(yàn)證碼",
 };
 },
 methods: {
 sendcode(){
 this.time=5;
 this.timer(); 
 },
 //發(fā)送手機(jī)驗(yàn)證碼倒計(jì)時(shí)
 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ā)送驗(yàn)證碼";
  this.disabled=false;
 }
 },
 }
}
</script>
 
<style scoped>
.el-button{
 margin: 100px 50px;
}
</style>

更多關(guān)于倒計(jì)時(shí)的文章請(qǐng)查看專題：《倒計(jì)時(shí)功能》

更多JavaScript時(shí)鐘特效點(diǎn)擊查看：JavaScript時(shí)鐘特效專題

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

淺談Vue SSR 的 Cookies 問題
本篇文章主要介紹了淺談Vue SSR 的 Cookies 問題，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-11-11
vue 返回上一頁,頁面樣式錯(cuò)亂的解決
今天小編就為大家分享一篇vue 返回上一頁,頁面樣式錯(cuò)亂的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
vue?如何根據(jù)條件判斷屬性的添加和去除
這篇文章主要介紹了vue?如何根據(jù)條件判斷屬性的添加和去除，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-01-01
vue中如何攜帶參數(shù)跳轉(zhuǎn)頁面
這篇文章主要介紹了vue中如何攜帶參數(shù)跳轉(zhuǎn)頁面問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04
詳解vue服務(wù)端渲染瀏覽器端緩存（keep-alive）
在使用服務(wù)器端渲染時(shí)，除了服務(wù)端的接口緩存、頁面緩存、組建緩存等，瀏覽器端也避免不了要使用緩存，減少頁面的重繪。這篇文章主要介紹了詳解vue服務(wù)端渲染瀏覽器端緩存（keep-alive），感興趣的小伙伴們可以參考一下
2018-10-10
vuex入門最詳細(xì)整理
在本篇文章里小編給大家分享的是關(guān)于vuex入門最詳細(xì)整理的相關(guān)內(nèi)容，需要的朋友們參考下。
2020-03-03
vue中使用moment設(shè)置倒計(jì)時(shí)的方法
這篇文章給大家介紹了vue中使用moment設(shè)置倒計(jì)時(shí)的方法,文中通過代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下
2024-02-02
Vue是怎么渲染template內(nèi)的標(biāo)簽內(nèi)容的
這篇文章主要介紹了Vue是怎么渲染template內(nèi)的標(biāo)簽內(nèi)容的，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-06-06
vue中輸入框事件的使用及數(shù)值校驗(yàn)方式
這篇文章主要介紹了vue中輸入框事件的使用及數(shù)值校驗(yàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
Vue.js watch監(jiān)視屬性知識(shí)點(diǎn)總結(jié)
在本篇文章里小編給大家分享的是關(guān)于Vue.js watch監(jiān)視屬性的相關(guān)知識(shí)點(diǎn)內(nèi)容，需要的朋友們學(xué)習(xí)下。
2019-11-11