Vue implémente le compte à rebours du code de vérification SMS

Cette fois, je vais vous présenter Vue pour implémenter le compte à rebours du code de vérification par SMS. Quelles sont les précautions pour que Vue implémente le compte à rebours du code de vérification par SMS. jetez un oeil.

Il y a deux balises span enveloppées dans le bouton. Différentes span sont affichées en fonction de l'état du clic Le code clé est le compte à rebours :

 <p id="example">
  <button @click="send">
   <span v-if="sendMsgDisabled">{{time+'秒后获取'}}</span>
   <span v-if="!sendMsgDisabled">send</span>
  </button>
 </p>

 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);
   }
  }
 })

Je crois que vous avez lu. C'est le cas dans cet article. Après avoir maîtrisé la méthode, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php pour un contenu plus passionnant !

Lecture recommandée :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!