Dieser Artikel ist ein detailliertes Tutorial mit detaillierteren Codes, die vom Herausgeber in Kombination mit offiziellen Dokumenten zusammengestellt wurden. Es ist für Anfänger sehr geeignet zu lernen. Interessierte Freunde können einen Blick darauf werfen!
Informationen stammen aus dem offiziellen Dokument:
http://cn.vuejs.org/guide/forms.html
Formbindung
① Häufige Bindungsmethoden:
【1】 Texteingangsbox Bindung;
【2】 textarea -Bindung (ähnlich wie [1]);
【3】 Funkausgewählte Wertbindung;
【4】 Checkbox -Bindung (automatisch Bündel Arrays, kein Name erforderlich);
【5】 Bindung auswählen;
【6】 Wählen Sie das Kontrollkästchen Multiple Selection -Kontrollkästchen aus.
【7】 Dynamische Bindung (die obigen Typen, aber der gleiche Wert kann interagieren);
[8] Das Kontrollkästchen ausgewählt und deaktiviert werden verschiedene Werte zugewiesen (hauptsächlich für den nicht kontrollierten Zustand).
【9】 Kontrollkästchen, Radio, ausgewählte Werte dynamisch binden (bezieht sich hauptsächlich auf das dynamische Bindungsobjekt oder das Attribut einer VM -Instanz, z. B. ein bestimmtes Attribut in Daten oder einen bestimmten Wert von berechnet);
Als Code:
<div id = "App"> <Eingabe type = "text" v-Model = "text"/> <div> {{text}} </div> <div> - - ~ ~ ~ - ——— ~ ups up. ~ - ~ ~ - — - ~ - ——— ~ up value = "firstCheckBox" v-model = "pechboxes"> firstCheckBox </label> <br/> <Label> <Eingabetyp = "Checkbox" value = "SecondCheckBox" v-Model = "CheckBoxes"> SecondChockBox </label> <br/> <label> </checkBox = "value <div>The selected value above is: {{checkboxes}}</div> <div>The value selected above is (displayed in json format, json filter is used here): {{checkboxes|json}}</div> <div>――――――――――――――――――――――</div> <label><input type="radio" value="A" v-model = "radio"/> value = a </label> <br> <label> <Eingabe type = "radio" value = "b" v-Model = "radio"/> value = b </label> <br> <div> {{radio}} </div> <div> Beachten Sie, dass der Wert von v-model hier zu verzeichnen war. <div>--~ ~ »-—-—— ~ </div> <select v-model =" select "> <option> Standardwert, die Option ist nicht Wert </option> <Option Value =" B "> Der Wert des Wertes wird auf b </option> <option ausgewählt =" c "> Default-Auswahl festgelegt. <div> Das Gleiche gilt, wenn Sie sich hier nicht registrieren, werden Sie einem Fehler gemeldet </div> <div> - - - ~ ~ - ~ - ~ ~ ——— up. value = "a"> a </option> <option value = "b"> b </option> <option value = "c"> c </option> <option value = "d"> d </option> <option value = "e"> e </option> </select> <div> Der Wert. y-axis </div> <div> - »~ —— - ~ ~ - ——— up up. » - ~ —— ~ ups up. <Label> <Eingabe type = "CheckBox" value = "b" v-model = "dynamic"> b </label> <br/> <Label> <Eingabe type = "CheckBox" value = "c" v-model = "dynamic"> c </label> <br/> </option-option = "option =" option = "option = option value = "c"> c </option> </select> <div> select ist: {{dynamic}} </div> <div> - ~ ——— ~ ——— ~ ~ ——— ——— ——— —— — — ~ </div> <div> uswace -Checkbox für ausgewählte und ausgewählte Werte </div> <darga> <Plip> </div> <Stype = "conchekbox". v-bind: true-value = "differenzvalues.t" v-Bind: false-value = "differenzvalues.f" v-model = "differenz"> true/false </label> <br/> <div> unterschiedlich. Bindung und VM -Instanz; Daher kann der Wert in V-Bind keine Zeichenfolge sein, aber es kann ein Objekt sein, wie {a: 1} (natürlich ist der zu diesem Zeitpunkt angezeigte Wert auch ein Objekt). <label> <Eingabe type = "radio" v-Bind: value = "textArea" v-model = "anpassen"/> Wert ist 1 </label> <div> {{adaptioniz}} </div> <div> In ähnlicher Weise kann der Wert eine Eigenschaft von VM oder ein Objekt sein und ausgewählt ist ebenfalls gültig. (Die Hauptdrei werden ausgewählt. Außerdem ist es auch nicht sehr bedeutungsvoll, obwohl auch der Datumstyp ausgewählt ist.) "Hier ist Multi-Line-Text/n, // n ist eine neue Linie, aber es wird als Speicherplatz in der Zeichenfolge angezeigt".②ADD -Parameter:
【1】 faul
Der Wert wird erst nach dem Abbrechen des Fokuszustands aktualisiert und nicht, wenn die Taste gedrückt wird.
Gültig für Texteingangsfelder und TextArea
Als Code:
<Eingabe type = "text" v-model = "text" Lazy/> <div> {{text}} </div>【2】 Nummer
Konvertieren Sie den Eingangswert automatisch in den Zahlentyp. Wenn er in den NAN -Typ konvertiert wird, kehrt er zum ursprünglichen Wert zurück.
Als Code:
<Eingabe type = "text" v-model = "text" number/> <div> {{text}} </div> <div> {{typeof text}} </div>Wenn die Parameternummer hinzugefügt wird, ist der Eingabeaufforderungstyp beim Eingeben einer Nummer String. Nach dem Hinzufügen fordert die reine Nummer den Nummerntyp auf.
【3】 dunounce = "Millisekunden"
Wenn sich der Wert für mehrere Millisekunden in einer Reihe nicht ändert, wird die Änderung des Wertes der Variablen ausgelöst.
Als Code:
<Eingabe type = "text" v-model = "text" dunounce = "1000"/> <div> {{text}} </div>Wenn ich die sechs Nummern 1, 2, 3, 4, 5, 6 nach einer Zeitdifferenz von 500 ms eingehe, wird der Wert des Textes nicht aktualisiert.
Wenn ich aufhöre, 1000 ms einzugeben, wird der Textwert aktualisiert.
Daher eignet es sich für Operationen mit hohem Konsums wie AJAX.
Das obige ist die Beispielanalyse von VueJS- und Formularelement -Beispielen, die vom Editor vorgestellt wurden. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!