Gegenfall für die Vue-Implementierung

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

Artikel empfehlen

Verwenden Sie Xshell, um eine Verbindung zur virtuellen Linux-Maschine auf VMware herzustellen (grafische Schritte)

Vorwort: Ich habe vor Kurzem begonnen, den Aufbau...

Implementierung mehrerer Nginx-Standorte, die alle Anfragen weiterleiten oder auf statische Ressourcendateien zugreifen

In diesem Artikel wird hauptsächlich die Implemen...

Einige Tipps zur umfassenden Optimierung, um die Zugriffsgeschwindigkeit von Websites zu verbessern

Einige Tipps zur umfassenden Optimierung, um die ...

Detaillierte Schritte für QT zum Herstellen einer Verbindung zur MySQL-Datenbank

Der erste Schritt besteht darin, das entsprechend...

Zusammenfassung der MySQL-Funktionsmethode LOAD_FILE()

In MySQL liest die Funktion LOAD_FILE() eine Date...

Vollständige MySQL-Sicherung und schnelle Wiederherstellungsmethoden

Ein einfaches MySQL-Vollsicherungsskript, das die...

Ein Artikel zum Verständnis von Operatoren in ECMAScript

Inhaltsverzeichnis Unäre Operatoren Boolesche Ope...

JS implementiert Karussell mit mehreren Tabs

Karussell-Animationen können das Erscheinungsbild...

JavaScript-Countdown zum Schließen von Anzeigen

Verwenden von Javascript zum Implementieren eines...

Beheben Sie das Problem des schwarzen Bildschirms beim Starten der virtuellen VMware-Maschine

# Passen Sie die Startpriorität der VMware-Festpl...

So implementieren Sie eine Multi-Terminal-Bridging-Plattform basierend auf WebSocket in JS

Inhaltsverzeichnis 1. Was zu debuggen ist 2. Funk...

Tutorial zur Installation und Konfiguration von MySQL 5.7.16 ZIP-Paketen

In diesem Artikel finden Sie das Installations- u...

Implementierung des Seitenumblättereffekts durch Gleiten und des Klickereignisproblems auf dem mobilen Endgerät

vorgenannt Dieser Artikel ist sehr kurz~ Der Haup...

Über React Native, das keine Verbindung zum Simulator herstellen kann

React Native kann native iOS- und Android-Apps ba...

WeChat Mini-Programm QR-Code-Generierungstool weapp-qrcode Detaillierte Erklärung

WeChat Mini-Programm - QR-Code-Generator Download...