Vue3 Formulare

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

Wir können die v-model-Direktive auf Formular<input>、<textarea>und<select>elementen verwenden, um eine bidirektionale Datenbindung zu erstellen.

v-model wählt automatisch die richtige Methode aus, um Elemente je nach Steuerelementtyp zu aktualisieren.

v-model ignoriert die Initialwerte der Attribute value, checked und selected aller Formularelemente und verwendet stattdessen die in der data-Option deklarierten Initialwerte.

Intern verwendet v-model für verschiedene Eingabeelemente unterschiedliche Eigenschaften und emittiert unterschiedliche Ereignisse:

  • text- und textarea-Elemente verwendenvalueEigenschaft undinputEreignis;
  • checkbox und radio verwendencheckedEigenschaft undchangeEreignis;
  • select-Felder werdenvalueals Eigenschaft verwenden undchangeals Ereignis.

Eingabe

Das Beispiel zeigt, wie v-model verwendet wird, um eine bidirektionale Datenbindung für input- und textarea-Elemente zu implementieren:

<div id="app"> <p>input-Element:</p> <input v-model="message" placeholder="Bearbeiten Sie mich..."> <p>Die Nachricht des Eingabeformulars ist: {{ message }}</p> <p>textarea-Element:</p> <textarea v-model="message2" placeholder="Mehrzeilige Texteingabe..."></textarea> <p>Die Nachricht des textarea-Formulars ist:</p> <p style="white-space: pre">{{ message2 }}</p> </div> <script>const app = { data() { return { message: '', message2: 'Example\r\nhttps://www.example.com' } } } Vue.createApp(app).mount('#app')</script>

Selbst ausprobieren »
Interpolation funktioniert im textarea-Element nicht; stattdessen müssen Sie v-model verwenden:
<!-- 错误 -->
<textarea>{{ text }}</textarea>

<!-- 正确 -->
<textarea v-model="text"></textarea>

Kontrollkästchen

Wenn eine Checkbox einzeln ist, ist sie ein boolescher Wert; wenn mehrere, werden sie 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>Der ausgewählte Wert ist: {{ checkedNames }}</span> </div> <script> const app = { data() { return { checked : false, checkedNames: [] } } } Vue.createApp(app).mount('#app') </script>

Selbst ausprobieren »

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

Optionsschaltflächen

Das folgende Beispiel demonstriert die bidirektionale Datenbindung von Radiobuttons:

Optionsschaltflächen

<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>Der ausgewählte Wert ist: {{ picked }}</span> </div> <script> const app = { data() { return { picked : 'Example' } } } Vue.createApp(app).mount('#app') </script>

Selbst ausprobieren »

Nach der Auswahl wird der Effekt unten angezeigt:

Auswahlliste

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

select

<div id="app"> <select v-model="selected" name="site"> <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> const app = { data() { return { selected: '' } } } Vue.createApp(app).mount('#app') </script>

Selbst ausprobieren »

Beispiel auswählen, der Ausgabeeffekt wird unten angezeigt:

Wenn Mehrfachauswahl aktiviert ist, wird sie an ein Array gebunden:

select

<div id="app"> <select v-model="selected" name="fruit" multiple> <option value="www.example.com">Beispiel</option> <option value="www.google.com">Google</option> <option value="www.taobao.com">Taobao</option> </select> <div id="output">Die ausgewählten Websites sind: {{selected}}</div> </div> <script> const app = { data() { return { selected: '' } } } Vue.createApp(app).mount('#app') </script>

Selbst ausprobieren »

Beispiel und Google auswählen:

Verwenden Siev-forSchleife, um Optionen auszugeben:

select

<div id="app" class="demo"> <select v-model="selected"> <option v-for="option in options" :value="option.value"> {{ option.text }} </option> </select> <span>Ausgewählt: {{ selected }}</span> </div> <script> const app = { data() { return { selected: 'www.example.com', options: [ { text: 'Beispiel', value: 'www.example.com' }, { text: 'Google', value: 'www.google.com' }, { text: 'Taobao', value: 'www.taobao.com' } ] } } } Vue.createApp(app).mount('#app') </script>

Selbst ausprobieren »

Beispiel auswählen:

Wertbindung

Für Radio-Buttons, Checkboxen und Select-Optionen ist der an v-model gebundene Wert normalerweise ein statischer String (bei Checkboxen kann er auch ein Boolean sein):

<!-- Wenn ausgewählt, ist `picked` der String "a" -->
<input type="radio" v-model="picked" value="a" />

<!-- `toggle` ist true oder false -->
<input type="checkbox" v-model="toggle" />

<!-- Wenn die erste Option ausgewählt ist, ist `selected` der String "abc" -->
<select v-model="selected">
  <option value="abc">ABC</option>
</select>

Aber manchmal möchten wir den Wert an eine dynamische Eigenschaft der aktuell aktiven Instanz binden. In diesem Fall kann v-bind verwendet werden. Darüber hinaus kann v-bind Eingabewerte an Nicht-String-Werte binden.

Kontrollkästchen:

<input type="checkbox" v-model="toggle" true-value="yes" false-value="no" />
...
// 选中时
vm.toggle === 'yes'
// 取消选中 
vm.toggle === 'no'

Radiobutton:

<input type="radio" v-model="pick" v-bind:value="a" />
// 当选中时
vm.pick === vm.a

Auswahloption:

<select v-model="selected">
  <!-- 内联对象字面量 -->
  <option :value="{ number: 123 }">123</option>
</select>
// 当被选中时
typeof vm.selected // => 'object'
vm.selected.number // => 123

Modifizierer

.lazy

Standardmäßig synchronisiert v-model den Eingabewert mit den Daten beim input-Ereignis, aber du kannst einen lazy-Modifier hinzufügen, um stattdessen beim change-Ereignis zu synchronisieren:

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

.number

Wenn du den Eingabewert des Benutzers automatisch in den Number-Typ konvertieren möchtest (wenn das Konvertierungsergebnis des ursprünglichen Werts NaN ist, wird der ursprüngliche Wert zurückgegeben), kannst du einen number-Modifier zu v-model hinzufügen, um den Eingabewert zu verarbeiten:

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

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

.trim

Wenn du führende und nachgestellte Leerzeichen aus der Benutzereingabe automatisch herausfiltern möchtest, kannst du einen trim-Modifier zu v-model hinzufügen, um die Eingabe zu filtern:

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