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

So richten Sie virtuelle Verzeichnisse ein und konfigurieren virtuelle Pfade in Tomcat 7.0

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

So richten Sie virtuelle Verzeichnisse ein und konfigurieren virtuelle Pfade in Tomcat 7.0

Detaillierte Erklärung von Cgroup, dem Kernprinzip von Docker

So installieren Sie Docker auf einem Linux-System und melden sich über SSH beim Docker-Container an

So installieren Sie MySQL und Redis in Docker

Ursachen und Lösungen für langsame MySQL-Abfragegeschwindigkeit und schlechte Leistung

React useEffect verstehen und verwenden

Der Unterschied zwischen ENTRYPOINT und CMD in Dockerfile

Verwendung des Docker-Systembefehlssatzes

Detaillierte Erklärung der Schlüsselwörter und reservierten Wörter in MySQL 5.7

Diagramm zum Implementierungsprozess der Linux-Jenkins-Konfigurations-Salve-Knoten

Artikel empfehlen

So ändern Sie die Schaltfläche „Durchsuchen“ des HTML-Formulars zum Hochladen von Dateien

Beispiele für die Verwendung des ES6-Spread-Operators

So konfigurieren Sie die MySQL-Master-Slave-Synchronisierung in Ubuntu 16.04

Lösen Sie das Problem des hässlichen blauen Rahmens nach dem Hinzufügen eines Hyperlinks zum HTML-Bild img

Ein Artikel zum Verständnis des Ausführungsprozesses von MySQL-Abfrageanweisungen

Die ultimative Lösung zum Abspielen von Hintergrundmusik im Firefox-Browser (Chrome-Multibrowser-kompatibel)

So gehen Sie mit vergessenen Passwörtern in Windows Server 2008 R2 um

Eine Liste der Fallstricke beim regulären JS-Matching

Fähigkeiten zur Seiten-Refaktorierung – Javascript, CSS

JavaScript Snake-Implementierungscode

Achten Sie beim Schreiben von Kurzeigenschaften in CSS auf die Reihenfolge der TRouBLe (um Fallstricke zu vermeiden).

Anweisungen zur Verwendung der MySQL-Isolations-Leseansicht

Lösung für die langsame Reaktion des Tomcat-Servers

Detaillierte Erläuterung der allgemeinen Docker-Befehle Study03

MySQL 5.7.18 Master-Slave-Replikations-Setup (ein Master und ein Slave) Tutorial mit ausführlicher Erklärung