Detaillierte Erläuterung der bidirektionalen Bindung von Vue

Inhaltsverzeichnis

1. Zwei-Wege-Bindung
2. Wird das gleiche Ergebnis erzielt, wenn andere Tags ausgewählt werden? Die Antwort ist natürlich ja:
3. Schauen wir uns noch eines an:
4. Hinweis
Zusammenfassen

1. Zwei-Wege-Bindung

Zweiwegebindung bedeutet, dass sich bei einer Änderung Ihrer Front-End-Daten auch die Daten in Ihren Daten ändern. Und wenn sich die Daten in Ihren Daten ändern, ändern sich auch die Daten auf der Front-End-Seite. Außerdem muss dieser Vorgang nicht aktualisiert werden.

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Titel</title>
</Kopf>
<Text>
<div id="app">
    <!-- Ihre Eingabe wird angezeigt. Tatsächlich ändern sich die Front-End-Daten und die Nachricht ändert sich entsprechend-->
    Eingabetext: <input type="text" v-model="message">{{message}}
</div>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<Skript>
    var vm = neuer Vue({
        el: "#app",
        Daten: {
            Nachricht: ""
        }
    });
</Skript>
 </body>
</html>

Laufergebnisse:

Wenn die Daten in den Daten geändert werden, ändern sich auch die Daten auf der Front-End-Seite, wie unten gezeigt:

Bildbeschreibung hier einfügen

Wenn sich die Front-End-Daten ändern, ändern sich auch die Daten in Ihren Daten.

Wie unten dargestellt:

Bildbeschreibung hier einfügen

2. Wird das gleiche Ergebnis erzielt, wenn andere Tags ausgewählt werden? Die Antwort ist natürlich ja:

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Titel</title>
</Kopf>
<Text>
<div id="app">
    Geschlecht:
    <input type="radio" name="sex" value="Male" v-model="message"> Männlich<input type="radio" name="sex" value="Female" v-model="message"> Weiblich<p>Ihr Geschlecht ist: {{message}}</p>
</div>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<Skript>
    var vm = neuer Vue({
        el: "#app",
        Daten: {
            Nachricht: ""
        }
    });
</Skript>
 </body>
</html>

Laufergebnisse:

Bildbeschreibung hier einfügen

3. Schauen wir uns noch eines an:

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Titel</title>
</Kopf>
<Text>
<div id="app">
    <v-Modell auswählen="Auswählen">
        <option value="" deaktiviert>--Bitte wählen--</option>
        <option>Männlich</option>
        <option>Weiblich</option>
    </Auswählen>
    <span>Ihre Auswahl: {{select}}</span>
</div>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<Skript>
    var vm = neuer Vue({
        el: "#app",
        Daten: {
            wählen: ""
        }
    });
</Skript>
 </body>
</html>

Laufergebnisse:

Bildbeschreibung hier einfügen

4. Hinweis

v-model ignoriert die Anfangswerte der Attribute value , checked und „ selected “ aller Formularelemente und verwendet immer die Daten der Vue-Instanz als Datenquelle. Initialwerte sollten Sie in der Datenoption der Komponente per JavaScript deklarieren! ! !

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalt auf 123WORDPRESS.COM lesen können!

Das könnte Sie auch interessieren:

Beispielcode einer benutzerdefinierten Vue-Komponente zur Implementierung bidirektionaler V-Model-Bindungsdaten
Das Prinzip und die Implementierung der bidirektionalen Bindung in Vue2.x
Implementierung der bidirektionalen Bindung von übergeordneten und untergeordneten Komponentendaten im Front-End-Framework Vue
Eine kurze Diskussion über das Prinzip des bidirektionalen Ereignisbindungs-V-Modells von Vue
Verwenden von js zum Implementieren der bidirektionalen Bindungsfunktion von Daten in Vue2.0
So implementieren Sie eine bidirektionale Bindungsfunktion in vue.js mit reinem JS

<<: Überblick und Einführung in das Linux-Betriebssystem

>>: Grundlegendes Verständnis und Verwendung der HTML-Auswahloption

CentOS 7 Installations- und Konfigurations-Tutorial unter VMware10

Nodejs erstellt ein Tool zur Dokumentsynchronisierung zur automatischen Synchronisierung mit dem Gitee-Implementierungscode

Artikel

Detaillierte Erläuterung der Prinzipien und der Verwendung der MySQL-Master-Slave-Replikation und der Lese-/Schreibtrennung

Dieser Artikel veranschaulicht anhand von Beispie...

Detaillierte Erläuterung der bidirektionalen Bindung von Vue

Inhaltsverzeichnis

1. Zwei-Wege-Bindung

2. Wird das gleiche Ergebnis erzielt, wenn andere Tags ausgewählt werden? Die Antwort ist natürlich ja:

3. Schauen wir uns noch eines an:

4. Hinweis

Zusammenfassen

CentOS 7 Installations- und Konfigurations-Tutorial unter VMware10

Klassifizierung der Farbeigenschaften von Webseiten

Der Unterschied zwischen ID- und Name-Attributen von HTML-Elementen

Mehrere Möglichkeiten, Bilder in React-Projekte einzuführen

Reines CSS3 zum Erstellen eines Beispielcodes für Haushühner

Tutorial zur Installation von MySQL 8.0.11 unter Linux

HTML-Multimediaanwendung: Einfügen von Flash-Animationen und Musik in Webseiten

Analyse der Gründe, warum das MySQL-Indexsystem den B + -Baum verwendet

Miniprogramm zur Implementierung des Paging-Effekts

Nodejs erstellt ein Tool zur Dokumentsynchronisierung zur automatischen Synchronisierung mit dem Gitee-Implementierungscode

Artikel empfehlen

Analyse und Anwendung des Wasserfallflussprinzips unregelmäßiger Bilder

MySQL InnoDB MRR-Optimierungshandbuch

Zusammenfassung der Tipps zur Verwendung von coalesce() in MySQL

JavaScript erklärt die Kapselung und Verwendung von Zeitlupenanimationen

Detaillierte Erläuterung der Prinzipien und der Verwendung der MySQL-Master-Slave-Replikation und der Lese-/Schreibtrennung

Der Unterschied zwischen MySQL-Datenbankhost 127.0.0.1 und localhost

So erstellen Sie LVM für das XFS-Dateisystem in Ubuntu

Spezifische Methode zum Anzeigen von Benutzerautorisierungsinformationen in MySQL

Detaillierte Erklärung der CocosCreator MVC-Architektur

JavaScript Canvas realisiert farbenfrohen Sonnenhalo-Effekt

Beispielanalyse der Verwendung gespeicherter MySQL-Prozeduren

Ubuntu kompiliert Kernelmodule und der Inhalt wird im Systemprotokoll angezeigt

Verwenden Sie semantische Tags, um Ihr HTML kompatibel mit IE6,7,8 zu schreiben

Die perfekte Lösung zum Hervorheben von Schlüsselwörtern in HTML

Detaillierte Erklärung zur Verwendung der benutzerdefinierten Vue-Baumsteuerung