Vue-Formulareingabebindung V-Modell

1.v-Modell

v-model gibt an, dass eine bidirektionale Bindung von Formularwerten und Attributen erreicht werden kann. Das heißt, wenn der Wert im Formularelement geändert wird, wird der Wert im Attribut automatisch aktualisiert, und wenn der Wert im Attribut aktualisiert wird, wird der Wert im Formular automatisch aktualisiert.

2. Bindungseigenschaften und Ereignisse

v-model verwendet intern unterschiedliche Attribute für unterschiedliche Eingabeelemente und löst unterschiedliche Ereignisse aus:

• 1. text und textarea verwenden value und input Eingabeereignis.
• 2. checkbox und Optionsfelder verwenden checked Attribut und change .
• 3. Das select nimmt value als prop und change als Ereignis an.
  

3. Formularelementbindung

3.1 Eingabebindung

<input v-model="message" placeholder="Bitte geben Sie ein...">
<p>Der Eingabeinhalt ist: {{ message }}</p>
 

3.2 Textbereichsbindung

<span>Der Eingabeinhalt ist:</span>
<p style="white-space: pre-line;">{{ Nachricht }}</p>
<br>
<textarea v-model="message" placeholder="Bitte geben Sie mehrere Zeilen ein..."></textarea>
 

3.3 Kontrollkästchenbindung

Mehrere Kontrollkästchen, an dasselbe Array gebunden

<div id="app">
  <input type="checkbox" id="basketball" value="basketball" v-model="hobby">
  <label für="basketball">Basketball</label>
  <input type="checkbox" id="football" value="Fußball" v-model="hobby">
  <label for="football">Fußball</label>
  <input type="checkbox" id="volleyball" value="Volleyball" v-model="hobby">
  <label für="volleyball">Volleyball</label>
  <p>{{Hobby}}</p>
</div>
<Skript>
  const app = new Vue({
    el: "#app",
    Daten: {
      Hobby: []
    }
  })
</Skript>

3.4 Funkbindung

<div id="app">
  <input type="radio" id="eins" value="Eins" v-model="ausgewählt">
  <label for="one">Eins</label>
  <br>
  <input type="radio" id="zwei" value="Zwei" v-model="ausgewählt">
  <label for="two">Zwei</label>
  <br>
  <span>Ausgewählt: {{ selected }}</span>
</div>
neuer Vue({
  el: '#app',
  Daten: {
    ausgewählt: ''
  }
})
 

3.5 Bindung auswählen

Einzelauswahl:

<div id="#app">
  <v-Modell auswählen="ausgewählt">
    <option disabled value="">Bitte wählen</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </Auswählen>
  <span>Ausgewählt: {{ ausgewählt }}</span>
</div>
neuer Vue({
  el: '...',
  Daten: {
    ausgewählt: ''
  }
})

Wenn Sie mehrere Optionen auswählen, fügen Sie einfach das Attribut multiple hinzu.

<div id="#app">
  <v-model auswählen="ausgewählt" mehrere Stil="Breite: 50px;">
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </Auswählen>
  <br>
  <span>Ausgewählt: {{ ausgewählt }}</span>
</div>
 

4. Wertebindung

Bei Optionsfeldern, Kontrollkästchen und Auswahlfeldoptionen ist der an v-model gebundene Wert normalerweise eine statische Zeichenfolge (bei Kontrollkästchen kann es sich auch um einen Booleschen Wert handeln).
Manchmal möchten wir aber einen Wert an eine dynamische property Vue -Instanz binden. Dies lässt sich mit v-bind erreichen, und der Wert dieser property muss kein String sein.

<div id="app">
  <label v-for="Hobby in Hobbys">
    <input type="checkbox" :id="hobby" :value="hobby" v-model="testHobby">{{hobby}}
  </Bezeichnung>
  <p>{{testHobby}}</p>
</div>
<Skript>
  const app = new Vue({
    el: "#app",
    Daten: {
      Hobbys: ["Basketball", "Fußball", "Badminton", "Tischtennis", "Tennis"],
      testHobby: []
    }
  })
</Skript>

4.1 Codedetails

• 1. Wir haben das hobbies Array in data erstellt, um die vom Backend zurückgegebenen Daten zu simulieren. Die Daten sind dynamisch.
• 2. Ein weiteres Array testHobby wird definiert, das die Daten im Kontrollkästchen daran bindet. Solange die Daten im Kontrollkästchen aktiviert sind, werden sie zu testHobby hinzugefügt
• 3. Verwenden Sie for Schleife, um die Daten in den hobbies zu durchlaufen
• 4. Das input -Tag ist an das id -Attribut und das value gebunden, und der Wert sind die durchlaufenen Daten. Sie können es sehen, wenn Sie den Quellcode der Webseite öffnen.
• 5. v-model bindet das input -Tag an testHobby

Lassen Sie uns abschließend den Bindungseffekt und den Quellcode der Webseite nach der Bindung überprüfen

Wir können sehen, dass die Werte von ID und value nach der Bindung das durchquerte hobby sind

5. Modifikatoren

5.1 .faul

Standardmäßig synchronisiert v-model den Wert des Eingabefelds mit den Daten, nachdem jedes input ausgelöst wurde. Sie können den lazy Modifikator hinzufügen, sodass sich der Wert nur ändert, wenn die Eingabetaste gedrückt wird oder der Fokus verloren geht:

<!-- Wert ändern, wenn Fokus verloren geht oder Enter gedrückt wird, nicht wenn „Eingabe“ gedrückt wird -->
<Eingabe v-Modell.lazy="msg">
 

5.2 .Nummer

Wenn Sie den Eingabewert des Benutzers automatisch in einen numerischen Typ konvertieren möchten, können Sie v-model number hinzufügen:

<input v-model.number="Alter" Typ="Nummer">

Dies ist oft nützlich, da der Wert HTML Eingabeelements immer als Zeichenfolge zurückgegeben wird, auch wenn type="number" ist. Wenn der Wert nicht von parseFloat() analysiert werden kann, wird der ursprüngliche Wert zurückgegeben.

5.3 .trimmen

Wenn Sie die vom Benutzer eingegebenen Leerzeichen am Anfang und Ende automatisch filtern möchten, können Sie den Modifikator trim zu v-model hinzufügen:

<Eingabe v-Modell.trim="msg">

Dies ist das Ende dieses Artikels über Vue -Formulareingabebindung v-model . Weitere relevante Vue v-model -Inhalte finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!