Vue implementiert eine kleine Countdown-Funktion

<div>
    <!--disabled bedeutet „true“ und deaktiviert -->
    Eingabefeld: <input type="text" :disabled="istrue">
    <button @click="addHandle" :disabled="istrue">Senden</button>
    <!-- Countdown-Textaufforderung-->
    <p>{{diese.txt}}</p>
</div>

<Skript>
Standard exportieren {
  Daten(){
    zurückkehren {
      txt:'',
      istwahr:falsch,
      Eingabe:''
    }
  },
  Methoden:{
    Handle hinzufügen() {
      //definiere n=5 Sekunden, sei n=5
      //Definieren Sie die Timerzeit
      lass Zeit = setzeIntervall(()=>{
        //Deaktiviere this.istrue=true
        //Ändern Sie die Countdown-Textaufforderung this.txt=n+'Senden in Sekunden'
        N--
        //Wenn n <0, lösche den Timer, hebe den deaktivierten Zustand auf und die Textaufforderung ist leer (wird nicht angezeigt).
        wenn(n<0){
          dies.txt=""
          this.istrue=false
          clearInterval(Zeit)
        }
      },1000)
    }
  }
}
</Skript>

<Vorlage>
  <div>
    <!--disabled bedeutet „true“ und deaktiviert -->
    Eingabefeld: <input type="text" :disabled="istrue">
    <button @click="addHandle" :disabled="istrue">Senden</button>
    <!-- Countdown-Textaufforderung-->
    <p>{{diese.txt}}</p>
  </div>
</Vorlage>
<Skript>
Standard exportieren {
  Daten(){
    zurückkehren {
      txt:'',
      istwahr:falsch,
      Eingabe:''
    }
  },
  Methoden:{
    Handle hinzufügen() {
      //definiere n=5 Sekunden, sei n=5
      //Definieren Sie die Timerzeit
      lass Zeit = setzeIntervall(()=>{
        //Deaktiviere this.istrue=true
        //Ändern Sie die Countdown-Textaufforderung this.txt=n+'Senden in Sekunden'
        N--
        //Wenn n <0, lösche den Timer, hebe den deaktivierten Zustand auf und die Textaufforderung ist leer (wird nicht angezeigt).
        wenn(n<0){
          dies.txt=""
          this.istrue=false
          clearInterval(Zeit)
        }
      },1000)
    }
  }
}
</Skript>