欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue驗(yàn)證碼60秒倒計(jì)時(shí)功能簡(jiǎn)單實(shí)例代碼

 更新時(shí)間:2018年06月22日 16:11:34   作者:Goodbye_Youth  
這篇文章主要介紹了Vue驗(yàn)證碼60秒倒計(jì)時(shí)功能簡(jiǎn)單實(shí)例代碼,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

template

<template>
 <div class='login'>
 <div class="loginHeader">
  <input type="tel" class="loginBtn border-bottom" placeholder="請(qǐng)輸入手機(jī)號(hào)" />
  <input type="tel" class="codeBtn" placeholder="請(qǐng)輸入驗(yàn)證碼" />
  <input type="button" class="getNumber" v-model="codeMsg" @click="getCode" :disabled="codeDisabled" />
 </div>
 </div>
</template>

script

<script>
 export default {
 data() {
  return {
  // 是否禁用按鈕
  codeDisabled: false,
  // 倒計(jì)時(shí)秒數(shù)
  countdown: 60,
  // 按鈕上的文字
  codeMsg: '獲取驗(yàn)證碼',
  // 定時(shí)器
  timer: null
  }
 },

 methods: {
  // 獲取驗(yàn)證碼
  getCode() {
  // 驗(yàn)證碼60秒倒計(jì)時(shí)
  if (!this.timer) {
   this.timer = setInterval(() => {
   if (this.countdown > 0 && this.countdown <= 60) {
    this.countdown--;
    if (this.countdown !== 0) {
    this.codeMsg = "重新發(fā)送(" + this.countdown + ")";
    } else {
    clearInterval(this.timer);
    this.codeMsg = "獲取驗(yàn)證碼";
    this.countdown = 60;
    this.timer = null;
    this.codeDisabled = false;
    }
   }
   }, 1000)
  }
  }
 }
 }
</script>

css(scss寫(xiě)法)

<style>
.login{
 width: 100%;
 height: 100%;
 background: #F9F9F9;
 .loginHeader{
 padding: 0 10px;
 background: #fff;
 margin-top: 20px;
 overflow: hidden;
 .loginBtn{
  width: 100%;
  height: 42px;
  border: none;
  background: #fff;
  color: #444;
  border-radius: 4px;
  outline: none;
  padding-left: 3px;
  font-size: 1.4rem;
  box-sizing: border-box;
  -webkit-appearance:none;
 }
 .border-bottom{
  border-bottom: 1px solid #F3F3F3;
 }
 .codeBtn{
  width: 63%;
  height: 42px;
  border: none;
  background: #fff;
  color: #444;
  border-radius: 4px;
  float: left;
  outline: none;
  padding-left: 3px;
  font-size: 1.4rem;
  box-sizing: border-box;
  -webkit-appearance:none;
 }
 .getNumber{
  width: 35%;
  height: 36px;
  float: right;
  margin-top: 3px;
  border: 1px solid #09BB07;
  color: #09BB07;
  background: #fff;
  border-radius: 4px;
  outline: none;
  -webkit-appearance:none;
 }
 }
}
</style>

總結(jié)

以上所述是小編給大家介紹的Vue驗(yàn)證碼60秒倒計(jì)時(shí)功能簡(jiǎn)單實(shí)例代碼,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!

相關(guān)文章

  • Vue?中的?computed?和?watch?的區(qū)別詳解

    Vue?中的?computed?和?watch?的區(qū)別詳解

    這篇文章主要介紹了Vue中的computed和watch的區(qū)別詳解,文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的小伙伴可以參考一下
    2022-09-09
  • vue點(diǎn)擊右鍵出現(xiàn)自定義操作菜單實(shí)現(xiàn)代碼

    vue點(diǎn)擊右鍵出現(xiàn)自定義操作菜單實(shí)現(xiàn)代碼

    這篇文章主要給大家介紹了關(guān)于vue點(diǎn)擊右鍵出現(xiàn)自定義操作菜單實(shí)現(xiàn)的相關(guān)資料,在網(wǎng)頁(yè)中我們也希望可以像桌面軟件一樣,點(diǎn)擊右鍵后出現(xiàn)操作菜單,對(duì)選中的數(shù)據(jù)項(xiàng)進(jìn)行相應(yīng)的操作,需要的朋友可以參考下
    2023-08-08
  • vue2和elementUI?實(shí)現(xiàn)落日余暉登錄頁(yè)和滑塊校驗(yàn)功能

    vue2和elementUI?實(shí)現(xiàn)落日余暉登錄頁(yè)和滑塊校驗(yàn)功能

    這篇文章主要介紹了vue2和elementUI打造落日余暉登錄頁(yè)和滑塊校驗(yàn),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下
    2023-06-06
  • vue 通過(guò) Prop 向子組件傳遞數(shù)據(jù)的實(shí)現(xiàn)方法

    vue 通過(guò) Prop 向子組件傳遞數(shù)據(jù)的實(shí)現(xiàn)方法

    這篇文章主要介紹了vue 通過(guò) Prop 向子組件傳遞數(shù)據(jù)的實(shí)現(xiàn)方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2020-10-10
  • vue項(xiàng)目如何讓局域網(wǎng)ip訪(fǎng)問(wèn)配置設(shè)置

    vue項(xiàng)目如何讓局域網(wǎng)ip訪(fǎng)問(wèn)配置設(shè)置

    這篇文章主要介紹了vue項(xiàng)目如何讓局域網(wǎng)ip訪(fǎng)問(wèn)配置設(shè)置,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。
    2022-09-09
  • vue實(shí)現(xiàn)微信分享朋友圈,發(fā)送朋友的示例講解

    vue實(shí)現(xiàn)微信分享朋友圈,發(fā)送朋友的示例講解

    下面小編就為大家分享一篇vue實(shí)現(xiàn)微信分享朋友圈,發(fā)送朋友的示例講解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2018-02-02
  • vue原生input輸入框原理剖析

    vue原生input輸入框原理剖析

    這篇文章主要為大家介紹了vue原生input輸入框原理剖析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-08-08
  • Vue.use()和Vue.prototype使用詳解

    Vue.use()和Vue.prototype使用詳解

    Vue.use()主要用于注冊(cè)全局插件,當(dāng)插件具有install方法時(shí),調(diào)用Vue.use()可以全局使用該插件,Vue.prototype用于注冊(cè)全局變量,這些變量在項(xiàng)目任何位置都可以通過(guò)this.$變量名訪(fǎng)問(wèn),兩者的主要區(qū)別在于Vue.use()用于插件,Vue.prototype用于變量
    2024-10-10
  • Element框架el-tab點(diǎn)擊標(biāo)簽頁(yè)時(shí)再渲染問(wèn)題的解決

    Element框架el-tab點(diǎn)擊標(biāo)簽頁(yè)時(shí)再渲染問(wèn)題的解決

    本文主要介紹了Element框架el-tab點(diǎn)擊標(biāo)簽頁(yè)時(shí)再渲染問(wèn)題的解決,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2022-04-04
  • 如何理解Vue的v-model指令的使用方法

    如何理解Vue的v-model指令的使用方法

    這篇文章主要介紹了如何理解Vue的v-model指令的使用方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-07-07

最新評(píng)論