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

Detaillierte Erläuterung der Kubernetes-Pod-Orchestrierung und des Lebenszyklus

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

Detaillierte Erläuterung der Kubernetes-Pod-Orchestrierung und des Lebenszyklus

Implementierung der Einbindung eines freigegebenen NFS-Verzeichnisses in einen Docker-Container

Lösen Sie schnell das Problem verstümmelter Zeichen und springender Zeilen in aus MySQL exportierten SCV-Dateien

Informationen zu WSL-Konfigurations- und Änderungsproblemen in Docker

So richten Sie eine automatische tägliche Datenbanksicherung in Linux ein

JavaScript-Grundlagen dieser Verweisung

Tutorial zum Bereitstellen von nginx+uwsgi in Django-Projekten unter Centos8

Zwei Möglichkeiten zum Deklarieren privater Variablen in JavaScript

Docker-Netzwerkprinzipien und detaillierte Analyse benutzerdefinierter Netzwerke

Vue implementiert einen Countdown zwischen angegebenen Daten

Artikel empfehlen

Zusammenfassung der praktischen Erfahrungen zu HTML-Wissenspunkten

CUDA8.0 und CUDA9.0 koexistieren unter Ubuntu16.04

So stellen Sie ein SpringBoot-Projekt mit Dockerfile bereit

So installieren Sie Nginx in CentOS7 und konfigurieren den automatischen Start

Beispiel einer DOM-Operationstabelle (DOM erstellt Tabelle)

So ändern Sie die Kodierung in MySQL Version 5.7 unter Windows auf UTF-8

Vue implementiert grafischen Überprüfungscode

So führen Sie eine Spring Boot-Anwendung in Docker aus

MySQL-Limit-Leistungsanalyse und -Optimierung

Unity stellt eine Verbindung zu MySQL her und liest den Implementierungscode der Tabellendaten

Mit dem Befehl docker prune können Sie selten genutzte Daten regelmäßig bereinigen.

Unbekannte Verwendung von Object.entries in JavaScript

Automatische Sicherung der MySQL-Datenbank per Shell-Skript

So schreiben Sie speichereffiziente Anwendungen mit Node.js

CocosCreator ScrollView-Optimierungsreihe: Frame-Laden