Vue實現(xiàn)倒計時小功能
更新時間：2021年09月14日 08:35:49 作者：王冰濤濤濤
這篇文章主要為大家詳細介紹了Vue實現(xiàn)倒計時小功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
很多項目中都需要實現(xiàn)倒計時功能，例：發(fā)送驗證碼。現(xiàn)在舉例實現(xiàn)一個簡單的倒計時按鈕功能。簡單布局，簡單操作，簡單效果，最主要的是思路和倒計時步驟理解?。。?/p>
例、代碼如下：
要求：點擊提交按鈕倒計時五秒，倒計時期間輸入框和提交按鈕禁用，倒計時結束后輸入框和提交按鈕再變成正常狀態(tài)
1、先實現(xiàn)要求的html布局，添加點擊事件
<div>
<!-- disabled為true禁用 -->
輸入框：<input type="text" :disabled="istrue">
<button @click="addHandle" :disabled="istrue">提交</button>
<!-- 倒計時文字提示 -->
<p>{{this.txt}}</p>
</div>
2、點擊提交按鈕倒計時開始變禁用狀態(tài)，定義一個計時器
<script>
export default {
data(){
return {
txt:'',
istrue:false,
inp:''
}
},
methods:{
addHandle(){
//定義n=5秒
let n=5
//定義定時器time
let time=setInterval(()=>{
//禁用
this.istrue=true
//改變倒計時文字提示
this.txt=n+'秒后提交'
n--
//如果n<0，清除定時器，禁用狀態(tài)取消，文字提示為空（不顯示）
if(n<0){
this.txt=""
this.istrue=false
clearInterval(time)
}
},1000)
}
}
}
</script>
思路步驟都寫在上方注釋里了，一個簡單的倒計時就這樣輕易實現(xiàn)了。
整體代碼：
<template>
<div>
<!-- disabled為true禁用 -->
輸入框：<input type="text" :disabled="istrue">
<button @click="addHandle" :disabled="istrue">提交</button>
<!-- 倒計時文字提示 -->
<p>{{this.txt}}</p>
</div>
</template>
<script>
export default {
data(){
return {
txt:'',
istrue:false,
inp:''
}
},
methods:{
addHandle(){
//定義n=5秒
let n=5
//定義定時器time
let time=setInterval(()=>{
//禁用
this.istrue=true
//改變倒計時文字提示
this.txt=n+'秒后提交'
n--
//如果n<0，清除定時器，禁用狀態(tài)取消，文字提示為空（不顯示）
if(n<0){
this.txt=""
this.istrue=false
clearInterval(time)
}
},1000)
}
}
}
</script>
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
本篇文章主要介紹了Vue自定義指令封裝節(jié)流函數(shù)的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要介紹了Django與Vue語法的沖突問題完美解決方法，本文給大家分享了兩種解決方法，需要的朋友參考下吧2017-12-12
vue頁面設置滾動失敗的完美解決方案(scrollTop一直為0)
這篇文章主要介紹了vue頁面設置滾動失敗的解決方案(scrollTop一直為0),本文通過場景分析實例代碼相結合給大家介紹的非常詳細，需要的朋友可以參考下2023-05-05
對vuejs的v-for遍歷、v-bind動態(tài)改變值、v-if進行判斷的實例講解
今天小編就為大家分享一篇對vuejs的v-for遍歷、v-bind動態(tài)改變值、v-if進行判斷的實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
本篇文章主要介紹了基于vue實現(xiàn)swipe分頁組件實例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
vue3+vite自定義封裝vue組件發(fā)布到npm包的全過程
當市面上主流的組件庫不能滿足我們業(yè)務需求的時候,那么我們就有必要開發(fā)一套屬于自己團隊的組件庫,下面這篇文章主要給大家介紹了關于vue3+vite自定義封裝vue組件發(fā)布到npm包的相關資料,需要的朋友可以參考下2022-09-09
Vue官網(wǎng)教程上關于v-model的講解不是十分的詳細,寫這篇文章的目的就是詳細的剖析一下,下面這篇文章主要給大家介紹了關于vue?v-model最詳細講解的相關資料,需要的朋友可以參考下2022-11-11
vue3中el-table實現(xiàn)多表頭并表格合并行或列代碼示例
這篇文章主要給大家介紹了關于vue3中el-table實現(xiàn)多表頭并表格合并行或列的相關資料,文中通過代碼介紹的非常詳細,對大家學習或者使用vue具有一定的參考借鑒價值,需要的朋友可以參考下2024-02-02
axios是用來做數(shù)據(jù)交互的插件，最近正在學習axios，所以想著整理成筆記方便大家和自己參考學習，下面這篇文章主要跟大家介紹了關于Axios使用方法的相關資料，需要的朋友們下面來一起看看吧。2017-07-07
本文主要介紹了vue項目多租戶環(huán)境變量的設置，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-04-04