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

Über Tomcat kombiniert mit Atomikos zur Implementierung von JTA

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

Über Tomcat kombiniert mit Atomikos zur Implementierung von JTA

So verwenden Sie den MySQL-Autorisierungsbefehl „grant“

So verwenden Sie dynamische Parameter und berechnete Eigenschaften in Vue

Lösungen für MySql-Abstürze und Dienststartfehler

Zusammenfassung und ausführliche Erläuterung der Docker-Container-Bedienungsanleitung

So reparieren Sie beschädigte MySQL-Datenbankdateien schnell mit den Tools myisamchk und mysqlcheck

Lösung zum Anwenden von CSS3-Transformationen auf Hintergrundbilder

Detaillierte Erläuterung der Vue Simple Notepad-Entwicklung

So bereinigen Sie regelmäßig Bilder, die über Jenkins „None“ sind

Anzeigen und Analysieren des MySQL-Ausführungsstatus

Artikel empfehlen

Chrome überwacht Cookie-Änderungen und weist Werte zu

Beispiel für die reguläre Umschreibmethode für Nginx Rewrite (Matching)

Lösen Sie das Problem inkonsistenter Front- und Back-End-Ports von Vue

Detaillierte Erläuterung zur Verwendung von Docker zum schnellen Bereitstellen der ELK-Umgebung (neueste Version 5.5.1)

Detaillierte Erklärung zur Installation von PHP7 unter Linux

React-Tipps zeigen Ihnen, wie Sie Probleme mit Hook-Abhängigkeiten beseitigen

So überwachen Sie die Windows-Leistung auf Zabbix

Super ausführliches Tutorial zur Implementierung der TabBar untere Navigationsleiste in Vue

Detaillierter Prozess zur Implementierung des 2048-Minispiels im WeChat-Applet

Lösung für falsche Zeichenfolgenwerte in MySQL

Zabbix überwacht die MySQL-Instanzmethode

Vor- und Nachteile von bedingten Kommentaren im Internet Explorer

Detaillierte Erklärung der JavaScript-Fehlererfassung

Zusammenfassung der CSS-Farbverlaufseffekte (linearer Farbverlauf und radialer Farbverlauf)

Vue implementiert das Hinzufügen von Wasserzeichen zu hochgeladenen Bildern