Grundnutzung
Sie können die V-Model-Direktive verwenden, um eine Zwei-Wege-Datenbindung für Form-Steuerelemente zu erstellen. Es wählt automatisch die richtige Methode aus, um das Element entsprechend dem Steuertyp zu aktualisieren. Obwohl V-Model etwas magisch ist, ist es nichts anderes als syntaktischen Zucker, die Daten in Benutzereingabeereignissen aktualisiert und insbesondere einige extreme Beispiele abwickeln.
Text
<span> Nachricht ist: {{message}} </span> <br> <Eingabe type = "text" v-Model = "message" placeholder = "bearbeiten me">Kontrollkästchen
Einzelkästchen, logischer Wert:
<Eingabe type = "CheckBox" id = "CheckBox" v-Model = "Checked"> <Label für = "CheckBox"> {{checked}} </label>Mehrere Kontrollkästchen, gebunden an das gleiche Array:
<input type = "checkBox" id = "Jack" value = "Jack" v-Model = "checkedNames"> <label for = "Jack"> Jack </Label> <Eingabe-Typ = "CheckBox" id = "John" value = "John" v-Model = "CheckedNames"> <Label für = "John"> John </label> <Eingabe-Typ = "mike". v-model = "checkedNames"> <label für = "mike"> mike </label> <br> <span> Checked Names: {{CheckedNames | JSON}} </span> New Vue ({El: '...', Daten: {CheckedNames: []}})Radio
<input type="radio" id="one" value="One" v-model="picked"><label for="one">One</label><br><input type="radio" id="two" value="Two" v-model="picked"><label for="two">Two</label><br><span>Picked: {{ picked }}</span>Wählen
Einzelauswahl:
<select v-model = "ausgewählt"> <Option Selected> A </Option> <option> B </Option> <option> C </Option> </ausgewählt> <span> Selected: {{ausgewählt}}} </span>Multiple Choice (an ein Array binden):
<select v-model = "ausgewählt" multiple> <option ausgewählt> a </option> <option> b </option> <option> c </option> </select> <br> <Pan> ausgewählt: {{{ausgewählt | JSON}} </span>Dynamische Optionen, rendern mit V-für:
<select v-model = "ausgewählt"> <option v-for = "Option in Optionen" v-Bind: value = "option.value"> {{uption.text}} </option> </select> <span> Ausgewählt: {{ausgewählt}}} </span> New Vue ({el: '...', Daten: {ausgewählt: 'A', Optionen: [{text: 'eins', Wert: 'A'}, {text: 'two', value: 'b'}, {text: 'drei', Wert: 'C'}}}})Wert binden
Für Optionsfelder, Kontrollkästchen und Boxoptionen ist der von V-Model gebundene Wert normalerweise eine statische Zeichenfolge (ein logischer Wert für Kontrollkästchen):
<!-Wenn `picted` die Zeichenfolge" a "-> <Eingabe type =" radio "v-model =" picked "value =" a "> <!-" Toggle` "ist wahr oder falsch-> <Eingabe type =" Kontrollkästchen "v-Model =" Toggle "> <!-Wenn ausgewählt, ausgewählt wurde, ist das String" ABS-ABCE "-> <ausgewählt". value = "ABC"> ABC </option> </select>
Aber manchmal wollen wir den Wert an eine dynamische Eigenschaft der VUE-Instanz binden, die mit V-Bindempfindlich implementiert werden kann, und der Wert dieser Eigenschaft ist möglicherweise keine Zeichenfolge.
Kontrollkästchen
<Eingabe type = "checkbox" v-model = "Toggle" v-Bind: true-value = "A" V-Bind: False-Value = "B"> // Wenn ausgewählt Vm.toggle === vm.a // Wenn nicht ausgewählt Vm.toggle ================== ite
Radio
<Eingabe type = "radio" v-model = "pick" v-Bind: value = "a"> // Wenn ausgewählt Vm.pick === vm.a
Optionen auswählen
<select v-model = "ausgewählt"> <!-Object Literal-> <Option V-Bind: value = "{Nummer: 123}"> 123 </option> </select> // Wenn ausgewählt wird, typed of vm.selected //-> 'Object'vm.selected.number //-> 123Parametermerkmale
faul
Standardmäßig synchronisiert V-Model-Werte und Daten Eingabefeld im Eingabeereignis. Sie können eine faule Funktion hinzufügen, um im Änderungsereignis zu synchronisieren:
<!-Aktualisieren Sie in "Änderung" anstelle von "input" -Ereignis->
<input v-model = "msg" Lazy>
Nummer
Wenn Sie die Eingabe des Benutzers automatisch in den Zahlentyp konvertieren möchten (zurück zum ursprünglichen Wert, wenn das Konvertierungsergebnis des ursprünglichen Wertes NAN ist), können Sie eine Funktionsnummer hinzufügen:
<input v-model = "Alter" Nummer>
Entlarven
Dobounce legt eine minimale Verzögerung fest und verzögert den Eingabefeldwert und die Daten nach jedem TAP. Es ist nützlich, wenn Sie jedes Update hochverhinderte Vorgänge ausführen müssen (z. B. AJAX-Anforderung in einer Eingabeaufforderung).
<input v-model = "msg" dunounce = "500">
Beachten Sie, dass der Parameter des Downounce das Eingabeereignis nicht verzögert: Es verzögert das Schreiben der zugrunde liegenden Daten. Bei der Verwendung von Dobounce sollte vm. $ Watch () verwendet werden, um auf Änderungen der Daten zu reagieren. Wenn Sie das DOM -Ereignis verzögern möchten, sollten Sie den Entlüftungsfilter verwenden.
Dieser Artikel wurde in das Tutorial "Vue.js Front-End-Komponenten Learning" zusammengestellt, und jeder kann gerne lernen und lesen.
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.