Ich lerne Vue mit einem Online-Kurs und der Kursleiter gab mir eine Übung, um einen Eingabetext mit einem Standardwert zu erstellen. Ich habe es mit v-model abgeschlossen, aber der Kursleiter hat v-bind: value gewählt und ich verstehe nicht warum.
Kann mir jemand eine einfache Erklärung über den Unterschied zwischen diesen beiden geben und wann es besser ist, jeden einzelnen zu verwenden?
javascript
mvvm
frameworks
vue.js
frontend
Gustavo Dias
quelle
quelle
v-model
wird hauptsächlich für Eingabe- und Formulargebote verwendet. Verwenden Sie es daher, wenn Sie mit verschiedenen Eingabetypen arbeiten.v-bind
Mit der Direktive können Sie einen dynamischen Wert erzeugen, indem Sie einen JS-Ausdruck eingeben, der in den meisten Fällen von den Daten aus dem Datenmodell abhängt. Stellen Sie sich also v-bind als Direktive vor, die Sie verwenden sollten, wenn Sie sich mit einigen dynamischen Dingen befassen möchten.<div v-bind:class="{ active: isActive }"></div>
- Sie können das HTML-Attribut nicht mit dem Modell binden, Sie sollten diev-bind
Direktive verwenden. Für die Elemente des Formulars sollten Sie diev-model
Direktive verwenden - "Sie wählt automatisch den richtigen Weg aus, um das Element basierend auf dem Eingabetyp zu aktualisieren."data
undprops
...Antworten:
Von hier aus - Denken Sie daran:
ist im Wesentlichen das gleiche wie:
oder (Kurzsyntax):
Dies
v-model
gilt auch für die bidirektionale Bindung von Formulareingaben . Es kombiniertv-bind
, die einen js Wert bringt in das Markup undv-on:input
zu dem js Wert zu aktualisieren .Verwenden
v-model
Sie, wenn Sie können. Benutzev-bind
/v-on
wenn du musst :-) Ich hoffe deine Antwort wurde akzeptiert.v-model
funktioniert mit allen grundlegenden HTML-Eingabetypen (Text, Textbereich, Nummer, Radio, Kontrollkästchen, Auswahl). Sie könnenv-model
mit verwenden,input type=date
wenn Ihr Modell Datumsangaben als ISO-Zeichenfolgen (JJJJ-MM-TT) speichert. Wenn Sie Datumsobjekte in Ihrem Modell verwenden möchten (eine gute Idee, sobald Sie sie bearbeiten oder formatieren möchten), tun Sie dies .v-model
hat einige zusätzliche Smarts, die es gut ist, sich dessen bewusst zu sein. Wenn Sie einen IME verwenden (viele mobile Tastaturen oder Chinesisch / Japanisch / Koreanisch), wird das V-Modell erst aktualisiert, wenn ein Wort vollständig ist (ein Leerzeichen wird eingegeben oder der Benutzer verlässt das Feld).v-input
wird viel häufiger feuern.v-model
auch Modifikatoren hat.lazy
,.trim
,.number
, in bedeckt doc .quelle
v-model
undv-bind:xxx.sync
?In einfachen Worten bedeutet
v-model
für zwei Wege Bindungen : Wenn Sie den Eingabewert ändern, werden die gebundenen Daten geändert und umgekehrt .Dies
v-bind:value
wird jedoch als Einwegbindung bezeichnet. Dies bedeutet: Sie können den Eingabewert ändern, indem Sie gebundene Daten ändern, aber Sie können gebundene Daten nicht ändern, indem Sie den Eingabewert über das Element ändern .Schauen Sie sich dieses einfache Beispiel an: https://jsfiddle.net/gs0kphvc/
quelle
this.data_source = 'Some new value'
data_source
meinen Sie den HTML-Code, der in DOM eingefügt wurdeinput
, oder?V-Modell
Es handelt sich um eine bidirektionale Datenbindung. Es wird zum Binden des HTML-Eingabeelements verwendet, wenn Sie den Eingabewert ändern. Dann werden die begrenzten Daten geändert.
Das v-Modell wird nur für HTML-Eingabeelemente verwendet
v-bind
ist eine Einweg-Datenbindung. Dies bedeutet, dass Sie nur Daten an ein Eingabeelement binden können, aber keine begrenzten Daten ändern können, indem Sie das Eingabeelement ändern. v-bind ist zu binden HTML - Attribut verwendet
ex:
<input type="text" v-bind:class="abc" v-bind:value="">
quelle
Hoffe das hilft dir beim Grundverständnis
quelle
Es gibt Fälle, in denen Sie nicht verwenden möchten
v-model
. Wenn Sie zwei Eingänge haben und jeder voneinander abhängig ist, können zirkuläre Referenzprobleme auftreten. Häufige Anwendungsfälle sind, wenn Sie einen Buchhaltungsrechner erstellen.In diesen Fällen ist es keine gute Idee, entweder Beobachter oder berechnete Eigenschaften zu verwenden.
Nehmen Sie stattdessen Ihre
v-model
und teilen Sie sie wie oben angegeben aufIn der Praxis rufen Sie wahrscheinlich eine Methode auf, wenn Sie Ihre Logik auf diese Weise entkoppeln.
So würde es in einem realen Szenario aussehen:
quelle