快捷導(dǎo)航

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自定義指令封裝節(jié)流函數(shù)的方法示例
本篇文章主要介紹了Vue自定義指令封裝節(jié)流函數(shù)的方法示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-07-07
Django與Vue語(yǔ)法的沖突問(wèn)題完美解決方法
這篇文章主要介紹了Django與Vue語(yǔ)法的沖突問(wèn)題完美解決方法，本文給大家分享了兩種解決方法，需要的朋友參考下吧
2017-12-12
vue頁(yè)面設(shè)置滾動(dòng)失敗的完美解決方案(scrollTop一直為0)
這篇文章主要介紹了vue頁(yè)面設(shè)置滾動(dòng)失敗的解決方案(scrollTop一直為0),本文通過(guò)場(chǎng)景分析實(shí)例代碼相結(jié)合給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2023-05-05
對(duì)vuejs的v-for遍歷、v-bind動(dòng)態(tài)改變值、v-if進(jìn)行判斷的實(shí)例講解
今天小編就為大家分享一篇對(duì)vuejs的v-for遍歷、v-bind動(dòng)態(tài)改變值、v-if進(jìn)行判斷的實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08
基于vue實(shí)現(xiàn)swipe分頁(yè)組件實(shí)例
本篇文章主要介紹了基于vue實(shí)現(xiàn)swipe分頁(yè)組件實(shí)例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-05-05
vue3+vite自定義封裝vue組件發(fā)布到npm包的全過(guò)程
當(dāng)市面上主流的組件庫(kù)不能滿足我們業(yè)務(wù)需求的時(shí)候,那么我們就有必要開(kāi)發(fā)一套屬于自己團(tuán)隊(duì)的組件庫(kù),下面這篇文章主要給大家介紹了關(guān)于vue3+vite自定義封裝vue組件發(fā)布到npm包的相關(guān)資料,需要的朋友可以參考下
2022-09-09
可能是全網(wǎng)vue?v-model最詳細(xì)講解教程
Vue官網(wǎng)教程上關(guān)于v-model的講解不是十分的詳細(xì),寫(xiě)這篇文章的目的就是詳細(xì)的剖析一下,下面這篇文章主要給大家介紹了關(guān)于vue?v-model最詳細(xì)講解的相關(guān)資料,需要的朋友可以參考下
2022-11-11
vue3中el-table實(shí)現(xiàn)多表頭并表格合并行或列代碼示例
這篇文章主要給大家介紹了關(guān)于vue3中el-table實(shí)現(xiàn)多表頭并表格合并行或列的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2024-02-02
Axios學(xué)習(xí)筆記之使用方法教程
axios是用來(lái)做數(shù)據(jù)交互的插件，最近正在學(xué)習(xí)axios，所以想著整理成筆記方便大家和自己參考學(xué)習(xí)，下面這篇文章主要跟大家介紹了關(guān)于Axios使用方法的相關(guān)資料，需要的朋友們下面來(lái)一起看看吧。
2017-07-07
vue項(xiàng)目多租戶環(huán)境變量的設(shè)置
本文主要介紹了vue項(xiàng)目多租戶環(huán)境變量的設(shè)置，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-04-04