Vue實(shí)現(xiàn)倒計(jì)時(shí)小功能

更新時(shí)間：2021年09月14日 08:35:49 作者：王冰濤濤濤

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

很多項(xiàng)目中都需要實(shí)現(xiàn)倒計(jì)時(shí)功能，例：發(fā)送驗(yàn)證碼?，F(xiàn)在舉例實(shí)現(xiàn)一個(gè)簡(jiǎn)單的倒計(jì)時(shí)按鈕功能。簡(jiǎn)單布局，簡(jiǎn)單操作，簡(jiǎn)單效果，最主要的是思路和倒計(jì)時(shí)步驟理解?。?！

例、代碼如下：

要求：點(diǎn)擊提交按鈕倒計(jì)時(shí)五秒，倒計(jì)時(shí)期間輸入框和提交按鈕禁用，倒計(jì)時(shí)結(jié)束后輸入框和提交按鈕再變成正常狀態(tài)

1、先實(shí)現(xiàn)要求的html布局，添加點(diǎn)擊事件

<div>
    <!-- disabled為true禁用 -->
    輸入框：<input type="text" :disabled="istrue">
    <button @click="addHandle" :disabled="istrue">提交</button>
    <!-- 倒計(jì)時(shí)文字提示 -->
    <p>{{this.txt}}</p>
</div>

2、點(diǎn)擊提交按鈕倒計(jì)時(shí)開(kāi)始變禁用狀態(tài)，定義一個(gè)計(jì)時(shí)器

<script>
export default {
  data(){
    return {
      txt:'',
      istrue:false,
      inp:''
    }
  },
  methods:{
    addHandle(){
      //定義n=5秒
      let n=5
      //定義定時(shí)器time
      let time=setInterval(()=>{
        //禁用
        this.istrue=true
        //改變倒計(jì)時(shí)文字提示
        this.txt=n+'秒后提交'
        n--
        //如果n<0，清除定時(shí)器，禁用狀態(tài)取消，文字提示為空（不顯示）
        if(n<0){
          this.txt=""
          this.istrue=false
          clearInterval(time)
        }
      },1000)
    }
  }
}
</script>

思路步驟都寫(xiě)在上方注釋里了，一個(gè)簡(jiǎn)單的倒計(jì)時(shí)就這樣輕易實(shí)現(xiàn)了。

整體代碼：

<template>
  <div>
    <!-- disabled為true禁用 -->
    輸入框：<input type="text" :disabled="istrue">
    <button @click="addHandle" :disabled="istrue">提交</button>
    <!-- 倒計(jì)時(shí)文字提示 -->
    <p>{{this.txt}}</p>
  </div>
</template>
<script>
export default {
  data(){
    return {
      txt:'',
      istrue:false,
      inp:''
    }
  },
  methods:{
    addHandle(){
      //定義n=5秒
      let n=5
      //定義定時(shí)器time
      let time=setInterval(()=>{
        //禁用
        this.istrue=true
        //改變倒計(jì)時(shí)文字提示
        this.txt=n+'秒后提交'
        n--
        //如果n<0，清除定時(shí)器，禁用狀態(tài)取消，文字提示為空（不顯示）
        if(n<0){
          this.txt=""
          this.istrue=false
          clearInterval(time)
        }
      },1000)
    }
  }
}
</script>

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

您可能感興趣的文章:

相關(guān)文章

Vue項(xiàng)目中接口調(diào)用的詳細(xì)講解
應(yīng)公司需求,接口需要對(duì)接vue,記錄一下碰到的問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目中接口調(diào)用的詳細(xì)講解,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-07-07
Vue對(duì)Element中el-tab-pane添加@click事件無(wú)效問(wèn)題解決
這篇文章主要給大家介紹了關(guān)于Vue對(duì)Element中el-tab-pane添加@click事件無(wú)效問(wèn)題的解決辦法,文中通過(guò)圖文以及代碼示例介紹的非常詳細(xì),需要的朋友可以參考下
2023-07-07
vue3使用flv.js播放推流視頻的示例代碼
本文主要介紹了vue3使用flv.js播放推流視頻的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-05-05
vue?perfect-scrollbar(特定框架里使用非該框架定制庫(kù)/插件)
這篇文章主要為大家介紹了vue?perfect-scrollbar在特定框架里使用一款并非為該框架定制的庫(kù)/插件如何實(shí)現(xiàn)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪<BR>
2023-05-05
vue2.0實(shí)現(xiàn)音樂(lè)/視頻播放進(jìn)度條組件
這篇文章主要為大家詳細(xì)介紹了vue2.0實(shí)現(xiàn)音樂(lè)和視頻播放進(jìn)度條組件的思路及具體實(shí)現(xiàn)方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-06-06
Vue Router的介紹與引入功能詳解
Vue Router 是?Vue.js?的官方路由,它與 Vue.js 核心深度集成,讓用 Vue.js 構(gòu)建單頁(yè)應(yīng)用變得輕而易舉,這篇文章主要介紹了Vue Router的介紹與引入,需要的朋友可以參考下
2024-01-01
Vue 應(yīng)用中結(jié)合vux使用微信 jssdk的方法
今天小編就為大家分享一篇Vue 應(yīng)用中結(jié)合vux使用微信 jssdk的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08
Vue項(xiàng)目部署在Spring Boot出現(xiàn)頁(yè)面空白問(wèn)題的解決方案
這篇文章主要介紹了Vue項(xiàng)目部署在Spring Boot出現(xiàn)頁(yè)面空白問(wèn)題的解決方案,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2018-11-11
vue一直自動(dòng)換行的問(wèn)題及解決
這篇文章主要介紹了vue一直自動(dòng)換行的問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
Vue中獲取圖片高度的兩種方法
在使用Vue2開(kāi)發(fā)移動(dòng)端頁(yè)面的時(shí)候,需要做一個(gè)效果,實(shí)現(xiàn)的方案是背景漸變,但是想要實(shí)現(xiàn)這個(gè)效果就必須進(jìn)行定位,我的背景高度需要在一個(gè)十分恰當(dāng)?shù)奈恢?但是我的圖片會(huì)隨著移動(dòng)端頁(yè)面的變化而發(fā)生高度的變化,為什么會(huì)變化？所以本文介紹了Vue中獲取圖片高度的方法
2024-08-08