Vue.js Formulare

In diesem Abschnitt stellen wir die Anwendung von Vue.js-Formularen vor.

Sie können die v-model-Direktive verwenden, um bidirektionale Datenbindungen für Formularsteuerelemente zu erstellen.

v-model wählt automatisch die richtige Methode zum Aktualisieren des Elements basierend auf dem Steuerelementtyp aus.

Eingabefelder

Das Beispiel veranschaulicht die bidirektionale Datenbindung mit v-model bei input- und textarea-Elementen:

<div id="app"> <p>input-Element:</p> <input v-model="message" placeholder="Bearbeiten Sie mich..."> <p>Nachricht ist: {{ message }}</p> <p>textarea-Element:</p> <p style="white-space: pre">{{ message2 }}</p> <textarea v-model="message2" placeholder="Mehrzeilige Texteingabe..."></textarea> </div> <script>new Vue({ el: '#app', data: { message: 'Example', message2: 'Example\r\nhttp://www.example.com' } })</script>

Ausprobieren »

Kontrollkästchen

Eine Checkbox kann ein boolescher Wert sein, und mehrere Checkboxen werden an dasselbe Array gebunden:

Kontrollkästchen

Das folgende Beispiel demonstriert die bidirektionale Datenbindung von Checkboxen:

<div id="app"> <p>Einzelne Checkbox:</p> <input type="checkbox" id="checkbox" v-model="checked"> <label for="checkbox">{{ checked }}</label> <p>Mehrere Checkboxen:</p> <input type="checkbox" id="example" value="Beispiel" v-model="checkedNames"> <label for="example">Beispiel</label> <input type="checkbox" id="google" value="Google" v-model="checkedNames"> <label for="google">Google</label> <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames"> <label for="taobao">taobao</label> <br> <span>Ausgewählte Werte: {{ checkedNames }}</span> </div> <script> new Vue({ el: '#app', data: { checked : false, checkedNames: [] } }) </script>

Ausprobieren »

Die Auswirkung des Ankreuzens der Kontrollkästchen im Beispiel wird unten angezeigt:

Radiobutton

Das folgende Beispiel demonstriert die bidirektionale Datenbindung von Radiobuttons:

Radiobutton

<div id="app"> <input type="radio" id="example" value="Example" v-model="picked"> <label for="example">Example</label> <br> <input type="radio" id="google" value="Google" v-model="picked"> <label for="google">Google</label> <br> <span>Ausgewählter Wert: {{ picked }}</span> </div> <script> new Vue({ el: '#app', data: { picked : 'Example' } }) </script>

Ausprobieren »

Nach der Auswahl ist der Effekt wie unten dargestellt:

Auswahlliste

Das folgende Beispiel demonstriert die bidirektionale Datenbindung einer Dropdown-Liste:

select

<div id="app"> <select v-model="selected" name="fruit"> <option value="">Wählen Sie eine Website</option> <option value="www.example.com">Beispiel</option> <option value="www.google.com">Google</option> </select> <div id="output">Die ausgewählte Website ist: {{selected}}</div> </div> <script> new Vue({ el: '#app', data: { selected: '' } }) </script>

Ausprobieren »

Auswahlbeispiel, der Ausgabeeffekt ist wie unten dargestellt:

Modifizierer

.lazy

Standardmäßig synchronisiert v-model den Eingabewert mit den Daten beim input-Ereignis, aber Sie können einen lazy-Modifikator hinzufügen, um stattdessen beim change-Ereignis zu synchronisieren:

<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >

.number

Wenn Sie den Eingabewert des Benutzers automatisch in den Typ Number umwandeln möchten (wenn der ursprüngliche Wert in NaN umgewandelt wird, wird der ursprüngliche Wert zurückgegeben), können Sie einen number-Modifier zu v-model hinzufügen, um den Eingabewert zu verarbeiten:

<input v-model.number="age" type="number">

Dies ist normalerweise nützlich, weil bei type="number" der in HTML eingegebene Wert immer als Typ string zurückgegeben wird.

.trim

Wenn Sie automatisch die führenden und nachfolgenden Leerzeichen der Benutzereingabe herausfiltern möchten, können Sie den trim-Modifier zu v-model hinzufügen, um die Eingabe zu filtern:

<input v-model.trim="msg">
Andere Erweiterungen