Vue.js implementiert eine einfache Timerfunktion

In diesem Artikelbeispiel wird der spezifische Code von vue.js zur Implementierung einer einfachen Timerfunktion zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt

<!DOCTYPE html>
<html lang="de">
<Kopf>
  <title>Beinheben-Konter</title>
  <script src="/static/vue/vue.js"></script>
  <script src="/static/vue/index.js"></script>
  <script src="/static/vue/vue-resource.min.js"></script>
  <link rel="stylesheet" href="/static/vue/index.css" >
</Kopf>
<style type="text/css">
  .el-container {
    Rand: 100px 30px 30px 30px;
    Höhe: 1800px;
    Hintergrundfarbe: #B3C0D1;
  }
  .el-button{
    Höhe: 1800px;
    Breite: 100 %;
    Schriftgröße: 300px;
  }
</Stil>
<Text>
  <div id="app">
    <el-container>
      <el-button type="primary" :disabled="!canclick" @click="hinzufügen">
        {{ num }} <el-divider></el-divider> {{ content }}
      </el-button>
    </el-container>
    <video ref="benachrichtigen">
      <source src="countdown.m4a" />
    </video>
  </div>
  <Skript>
    neuer Vue({
      el: '#app',
      Daten: Funktion () {
        zurückkehren {
          Zahl: 0,
          kann klicken:true,
          Inhalt: „Zähler“,
          Anzahl: 10
        }
      },
      montiert(){
        this.getnum() //Alle Optionen abrufen},
      Methoden:{
        getnum:Funktion(){
          dies.$http.get('/api/count/count.php').dann(function(res){
            diese.num=res.data 
          },Funktion(){
            console.log('Anforderung konnte nicht verarbeitet werden')
          });
        },
        hinzufügen:Funktion(){
          dies.canclick=false
          dies.$refs.notify.play()
          this.content = this.count + ‚s nach dem Ende‘
          lass uhr = setInterval(()=>{
            diese.Anzahl--
            this.content = this.count + ‚s nach dem Ende‘
            wenn(dieser.Anzahl==0){
              this.content="Zähler"
              Löschintervall (Uhr)
              dies.canclick=true
              diese.Anzahl = 10
            }
          },850);
          dies.$http.get('/api/count/add.php?num='+this.num).then(function(res){
            diese.num=res.data
          },Funktion(){
            console.log('Anforderung konnte nicht verarbeitet werden')
          });
        }
      }
    })
  </Skript>
</body>
</html>

Die Wirkung ist wie folgt

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:

Implementierung eines einfachen Timers in JavaScript
JS implementiert einen Stoppuhr-Timer
JS verwendet den setInterval-Timer, um die 10-Sekunden-Challenge zu implementieren
JavaScript implementiert einen gut aussehenden Stoppuhr-Timer
JavaScript setInterval() vs setTimeout() Timer
js implementiert integrierten Timer
Detaillierte Erklärung der JavaScript-Timer- und Button-Effekt-Einstellungen

<<: Detaillierte Erläuterung des SVN-Ein-Klick-Installations-Shell-Skripts unter Linux

>>: Detailliertes Tutorial zur Installation von MySQL unter WINDOWS