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