Directive v-model de Vue3

Vue3 内置指令Vue3 Directives intégrées

v-modelLa directive est utilisée pour créer une liaison de données bidirectionnelle sur les éléments de saisie de formulaire et les composants.

Description de base

v-modelLa directive crée une liaison de données bidirectionnelle sur les éléments de formulaire et les composants. Elle sélectionne automatiquement la méthode correcte pour mettre à jour l'élément en fonction du type de contrôle.

  • Type attendu: Varie en fonction du type d'élément de formulaire
  • Fonction: Crée une liaison de données bidirectionnelle sur les éléments de saisie de formulaire et les composants.

Utilisation de base

1. Saisie de texte

Exemple

<template>
  <div>
    <input v-model="message" placeholder="Contenu de la saisie" />
    <p>Contenu de la saisie : {{ message }}</p>
  </div>
</template>

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

2. Case à cocher

Exemple

<template>
  <div>
    <input type="checkbox" id="agree" v-model="agreed" />
    <label for="agree">J'accepte les conditions</label>
    <p>Accepté : {{ agreed }}</p>
  </div>
</template>

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

Modificateurs

  • .lazy: Synchronise après l'événement change (plutôt que sur l'événement input)
  • .number: Convertit automatiquement en nombre
  • .trim: Supprime automatiquement les espaces en début et en fin

Exemple

<input v-model.lazy="lazyInput" placeholder="Synchroniser à la perte de focus" />
<input v-model.number="age" type="number" placeholder="Conversion automatique en nombre" />
<input v-model.trim="username" placeholder="Supprimer les espaces" />

Vue3 内置指令Vue3 Directives intégrées

Autres extensions