最近做了一個小的demo,分享給大家,在很多地方都能用到。
一般獲取短信驗證碼的時候會用到這個demo:

button里面包兩個span標簽,根據點擊狀態,顯示不同的span,關鍵代碼就是倒計時:
<div id="example"> <button @click="send"> <span v-if="sendMsgDisabled">{{time+'秒后獲取'}}</span> <span v-if="!sendMsgDisabled">send</span> </button> </div> button { width: 100px; height: 50px background: pink; }var vm = new Vue({ el: '#example', data() { return { time: 60, // 發送驗證碼倒計時 sendMsgDisabled: false } }, methods: { send() { let me = this; me.sendMsgDisabled = true; let interval = window.setInterval(function() { if ((me.time--) <= 0) { me.time = 60; me.sendMsgDisabled = false; window.clearInterval(interval); } }, 1000); } } })以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。
新聞熱點
疑難解答