Heim > Artikel > Web-Frontend > Was ist der Unterschied zwischen V-Bind und V-Modell in Vue?
Unterschiede: 1. „v-bind“ ist eine unidirektionale Bindung, während „v-model“ eine bidirektionale Bindung ist; 2. „v-bind“ kann nur Daten in Vue mit der Seite synchronisieren, während „ „v-model“ kann nicht nur Daten in Vue mit der Seite synchronisieren, sondern auch Benutzerdaten Attributen in Vue zuweisen.
Die Betriebsumgebung dieses Tutorials: Windows 7-System, Vue-Version 2.9.6, DELL G3-Computer.
Der Unterschied zwischen V-Modell und V-Bind:
1. V-Bind ist eine Einwegbindung, die zum Binden von Daten, Eigenschaften und Ausdrücken verwendet wird und nur Daten in Vue mit der Seite synchronisieren kann .
2. Das V-Modell ist eine bidirektionale Bindung. Es kann nicht nur Daten in Vue mit der Seite synchronisieren, sondern auch Benutzerdaten Attributen in Vue zuweisen.
3. V-Bind kann jedem Attribut einen Wert zuweisen, während V-Modell nur eine bidirektionale Datenbindung für Elemente mit einem Wertattribut durchführen kann.
V-Modell wird hauptsächlich in Formularen verwendet. Es erstellt eine bidirektionale Bindung für Formularelemente und wählt die richtige Methode zum Aktualisieren von Elementen entsprechend dem Steuerelementtyp. und ausgewählt
1. Bindungstext
e943de7f41fde7c6082e672342ce5b5a e388a4556c0f65e1904146cc1a846bee {{val}} 94b3e26ee717c64999d7867364b1b4a3
(1) Single Kontrollkästchen, der Endwert ist der logische Wert wahr und falsch
<input type="radio" value="one" v-model="radioVal" /> <input type="radio" value="two" v-model="radioVal" /> <label for v-bind="radioval" />
(2) Wenn mehrere Kontrollkästchen vorhanden sind, binden Sie den Wert an ein Array
<input type="checkbox" v-model="checkVal"/> <label for="checkbox">{{checkVal}}</label>
Der Wert in checkArray ändert sich entsprechend, je nachdem, ob er ausgewählt ist
4. Auswahl binden
(1) An eine einzelne Auswahl binden
(2) Beim Binden mehrerer Auswahlen gilt das Gleiche für Arrays(1) Lazy
Ändern Sie das Eingabefeld Das Eingabeereignis wird in ein Änderungsereignis geändert, sodass das Eingabefeld im Änderungsereignis anstelle der Eingabe aktualisiert wird.
Was den Unterschied zwischen dem Änderungsereignis und dem Eingabeereignis betrifft, einfach ausgedrückt:
Das Änderungsereignis muss danach ausgelöst werden Das Eingabefeld verliert den Fokus. Eingabeereignisse können in Echtzeit überwacht werden.
(2)Zahl
Ändern Sie die im Textfeld eingegebenen Werte in Zahlen. Wenn sie in eine Zahl gefolgt von NAN geändert werden, wird der ursprüngliche Wert zurückgegeben.
(3)trim
Entfernen Sie das führende und Nachgestellte Leerzeichen der Eingabezeichenfolge
2. v-bind
{}}<input type="checkbox" value="apple" v-model="checkArray"/>
<label for="checkbox">{{apple}}</label>
<input type="checkbox" value="banana" v-model="checkArray"/>
<label for="checkbox">{{banana}}</label>
<input type="checkbox" value="pear" v-model="checkArray"/>
<label for="checkbox">{{pear}}</label>
<span>{{checkArray | json}}</span>
<p v-bind="message"></p> <p>{{message}}</p>
4. Bindungs-HTML
<p v-bind:src="http://...."></p> <p v-bind:class="http://...."></p> <p v-bind:style="http://...."></p>Zu diesem Zeitpunkt müssen drei {} verwendet werden
Weitere Programmierkenntnisse finden Sie unter: Programmiervideo
! !Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen V-Bind und V-Modell in Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!