Vue3 v-model-Direktive

Vue3 内置指令Vue3 Eingebaute Direktiven

v-modelDie Direktive wird verwendet, um eine bidirektionale Datenbindung für Formulareingabeelemente und Komponenten zu erstellen.

Grundlegende Beschreibung

v-modelDie Direktive erstellt eine bidirektionale Datenbindung für Formularelemente und Komponenten. Sie wählt automatisch die richtige Methode aus, um das Element basierend auf dem Steuerelementtyp zu aktualisieren.

  • Erwarteter Typ: Variiert je nach Formularelementtyp
  • Funktion: Erstellt eine bidirektionale Datenbindung für Formulareingabeelemente und Komponenten.

Grundlegende Verwendung

1. Texteingabe

Beispiel

<template>
  <div>
    <input v-model="message" placeholder="Eingabeinhalt" />
    <p>Eingabeinhalt: {{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return { message: '' }
  }
}
</script>

2. Kontrollkästchen

Beispiel

<template>
  <div>
    <input type="checkbox" id="agree" v-model="agreed" />
    <label for="agree">Ich stimme den Bedingungen zu</label>
    <p>Zugestimmt: {{ agreed }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return { agreed: false }
  }
}
</script>

Modifizierer

  • .lazy: Synchronisiert nach dem change-Ereignis (statt bei input)
  • .number: Konvertiert automatisch in eine Zahl
  • .trim: Entfernt automatisch führende/nachfolgende Leerzeichen

Beispiel

<input v-model.lazy="lazyInput" placeholder="Bei Blur synchronisieren" />
<input v-model.number="age" type="number" placeholder="Automatisch in Zahl umwandeln" />
<input v-model.trim="username" placeholder="Leerzeichen entfernen" />

Vue3 内置指令Vue3 Eingebaute Direktiven

Andere Erweiterungen