Maison > interface Web > js tutoriel > Vue implémente le compte à rebours du code de vérification SMS

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

php中世界最好的语言
Libérer: 2018-04-17 10:35:32
original
3152 Les gens l'ont consulté

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>
Copier après la connexion
 button {
  width: 100px;
  height: 50px background: pink;
 }
Copier après la connexion
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);
   }
  }
 })
Copier après la connexion
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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal