Gegenfall für die Vue-Implementierung

In diesem Artikelbeispiel wird der spezifische Code von Vue zur Realisierung der Zähleranzeige als Referenz bereitgestellt. Der spezifische Inhalt ist wie folgt

Wirkung:

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Zähler</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style type="text/css">
       #app{
          Textausrichtung: zentriert;
          Rand: 0 automatisch;
          Zeilenhöhe: 500px;
       }

       #App-Eingabe{
           Breite: 50px;
           Höhe: 40px;
           Schriftgröße: 20px;
           Rahmenradius: 5px;
           Gliederung: keine;
           /* Benutzerdefinierter Rahmen */
           Rand: 1px durchgehend transparent;
           Hintergrundfarbe: blau;
           Zeilenhöhe: 30px;
           Farbe: weiß;
       }
       #app span{
           Polsterung: 20px 20px;
           Rand: 1px;
       }
       
    </Stil>
</Kopf>
<Text>
    <div id="app">
      <input Typ="Schaltfläche" Wert="-" @click="sub"/>
      <span>{{num}}</span>
      <input Typ="Schaltfläche" Wert="+" @click="Hinzufügen"/>
    </div>

    <Skript>
        var app = new Vue({
            el: "#app",
            Daten: {
                Zahl: 1
            },
            Methoden:{
                hinzufügen: function(){
                   wenn(diese.zahl<10){
                    diese.num++;
                   }anders{
                       alert("Maximum erreicht!");
                   }                    
                },

                sub: Funktion(){
                    wenn(diese.zahl>0){
                        diese.nummer--;
                    }anders{
                        alert("Es ist weg!");
                    }
                    
                }
            }
        })
    </Skript>
</body>
</html>

Schreiben Sie die benötigten Daten in data : Nummer
-Fügen Sie zwei Methoden in Methoden hinzu : Addieren und Subtrahieren
Verwenden Sie v-text oder einen Differenzausdruck, um num auf das Span- Tag zu setzen
Verwenden Sie v-on : (Abkürzung, @ ), um „Add“ und „Sub“ jeweils an die Schaltflächen „+“ und „-“ zu binden.
Akkumulationslogik: wenn weniger als 10, akkumulieren, sonst Eingabeaufforderung
Dekrementlogik: größer als 0, schrittweise, andernfalls prompt
Die Methode verwendet das Schlüsselwort this , um die Daten in data abzurufen

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:

Vue implementiert eine einfache Produktion von Zählern
Erstellen Sie eine PC-seitige Vue UI-Komponentenbibliothek von Grund auf (Zählerkomponente).
Vuex-Verwendung und einfaches Beispiel (Zähler)
Vuex implementiert Zähler- und Listenanzeigeeffekte
Vuex implementiert einen einfachen Zähler
Implementierung des Vue-Zählers

<<: Zusammenfassung der Wissenspunkte zur Synchronisierung und zum gegenseitigen Ausschluss zwischen Linux-Threads

>>: Detaillierte Erklärung, wie eine SQL-Anweisung in MySQL ausgeführt wird