Vue implementiert eine einfache Produktion von Zählern

In diesem Artikelbeispiel wird der einfache Implementierungscode des Vue-Zählers zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt

Prozessüberlegungen

Beim Erstellen einer Vue-Instanz: el (Einhängepunkt) Daten (Daten) Methoden (Methoden).
Zum Binden von Ereignissen wird die Direktive v-on verwendet, abgekürzt mit @.
Die Daten in Daten werden durch das Schlüsselwort this in der Methode abgerufen.
Die Funktion der v-text-Direktive besteht darin, den Textwert eines Elements festzulegen, abgekürzt {{}}.
Die Funktion der v-html-Anweisung besteht darin, das innerHTML eines Elements festzulegen.

Aktueller Code und Screenshots

<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>Zähler</title>
</Kopf>
<Text>
    <div id="app">
        <!--Zählerfunktionsbereich-->
        <div Klasse="Eingabe-Nummer">
            <button @click="sub">
                -
            </button>
            <span>{{num}}</span>
            <button @click="hinzufügen">
                +
            </button>
        </div>
    </div>
        <!-- Entwicklungsversion, einschließlich hilfreicher Befehlszeilenwarnungen -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<Skript>
    //Vue-Instanz var app = new Vue({
        el:"#app",
       Daten: {
            Zahl: 1
       },
       Methoden: {
           hinzufügen:Funktion(){
               //console.log('hinzufügen')
               wenn(diese.zahl<10){
                diese.num++; 
               }anders{
                alert('Nicht klicken, es ist das Größte!');
               }
           },
           Unterfunktion(){
               //Konsole.log('sub')
               wenn(diese.zahl>0){
                diese.nummer--; 
               }anders{
                alert('Nicht klicken, das ist das Minimum!');
               }
           }
       },
    })
</Skript>
</body>
</html>

Um Tutorials zu Vue.js-Komponenten zu erhalten, klicken Sie bitte auf das spezielle Lern-Tutorial zu Vue.js-Komponenten.

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:

Gegenfall für die Vue-Implementierung
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

<<: Lösung für das Problem mit verstümmeltem MySQL-Code unter Linux

>>: Das Problem „mmx64.efi nicht gefunden“ tritt bei der Installation des Ubuntu18-Dualsystems auf Win10 auf