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

Apr 17, 2018 am 10:35 AM
倒计时 短信 验证

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!

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

Article chaud

Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Article chaud

Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Tags d'article chaud

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment vérifier la signature dans un PDF Comment vérifier la signature dans un PDF Feb 18, 2024 pm 05:33 PM

Comment vérifier la signature dans un PDF

Comment configurer le blocage des messages texte sur iPhone Comment configurer le blocage des messages texte sur iPhone Feb 24, 2024 pm 01:48 PM

Comment configurer le blocage des messages texte sur iPhone

Méthode détaillée pour débloquer à l'aide de la vérification assistée par un ami WeChat Méthode détaillée pour débloquer à l'aide de la vérification assistée par un ami WeChat Mar 25, 2024 pm 01:26 PM

Méthode détaillée pour débloquer à l'aide de la vérification assistée par un ami WeChat

Comment écrire un programme de compte à rebours simple en C++ ? Comment écrire un programme de compte à rebours simple en C++ ? Nov 03, 2023 pm 01:39 PM

Comment écrire un programme de compte à rebours simple en C++ ?

Comment utiliser Vue pour implémenter des effets de compte à rebours des boutons Comment utiliser Vue pour implémenter des effets de compte à rebours des boutons Sep 21, 2023 pm 02:03 PM

Comment utiliser Vue pour implémenter des effets de compte à rebours des boutons

Comment valider le code IFSC à l'aide d'expressions régulières ? Comment valider le code IFSC à l'aide d'expressions régulières ? Aug 26, 2023 pm 10:17 PM

Comment valider le code IFSC à l'aide d'expressions régulières ?

Nouvelles fonctionnalités de PHP 8 : ajout de la vérification et de la signature Nouvelles fonctionnalités de PHP 8 : ajout de la vérification et de la signature Mar 27, 2024 am 08:21 AM

Nouvelles fonctionnalités de PHP 8 : ajout de la vérification et de la signature

Comment vérifier si l'entrée est constituée de caractères pleine chasse dans Golang Comment vérifier si l'entrée est constituée de caractères pleine chasse dans Golang Jun 25, 2023 pm 02:03 PM

Comment vérifier si l'entrée est constituée de caractères pleine chasse dans Golang

See all articles