v-model sur tous les éléments de formulaire
Input, textarea, select, case à cocher, bouton radio — adaptation de v-model à chaque type d’élément.
v-model sur tous les éléments de formulaire est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 4 leçons au total.
Lier les champs de formulaire
v-model crée une liaison bidirectionnelle entre les contrôles de formulaire et votre état réactif. Chaque type de contrôle — champ de texte, case à cocher, bouton radio, liste de sélection ou zone de texte — utilise v-model d’une manière légèrement différente. Cette leçon les présente tous.
Champ de texte
Sur un champ de texte, v-model lie la valeur et la met à jour lors de la saisie. Saisissez du texte dans le champ et la référence se met à jour en temps réel.
<script setup>
import { ref } from 'vue'
const name = ref('')
</script>
<template>
<input v-model="name" />
<p>Hello, {{ name }}</p>
</template>Zone de texte
Une zone de texte fonctionne comme un champ de texte. Utilisez v-model directement sur l’élément — ne placez pas de texte entre les balises.
<template>
<textarea v-model="message"></textarea>
</template>Case à cocher : booléen
Une seule case à cocher liée à une référence booléenne bascule entre true et false.
<script setup>
import { ref } from 'vue'
const agreed = ref(false)
</script>
<template>
<input type="checkbox" v-model="agreed" />
<p>Agreed: {{ agreed }}</p>
</template>Cases à cocher multiples dans un tableau
Liez plusieurs cases à cocher à la même référence de tableau. Chaque case cochée ajoute sa value au tableau.
<script setup>
import { ref } from 'vue'
const hobbies = ref([])
</script>
<template>
<input type="checkbox" value="reading" v-model="hobbies" />
<input type="checkbox" value="coding" v-model="hobbies" />
<p>{{ hobbies }}</p>
</template>Boutons radio
Les boutons radio d’un même groupe partagent une référence. Celle-ci contient la value de l’option sélectionnée.
<script setup>
import { ref } from 'vue'
const picked = ref('')
</script>
<template>
<input type="radio" value="small" v-model="picked" />
<input type="radio" value="large" v-model="picked" />
<p>Picked: {{ picked }}</p>
</template>Liste de sélection : choix unique
Une liste de sélection associe une valeur à l’option choisie. Si vous le souhaitez, fournissez une option d’espace réservé avec une valeur vide.
<script setup>
import { ref } from 'vue'
const city = ref('')
</script>
<template>
<select v-model="city">
<option value="">Choose</option>
<option value="paris">Paris</option>
<option value="tokyo">Tokyo</option>
</select>
</template>Liste de sélection : choix multiple
Ajoutez l’attribut multiple et liez-le à un tableau. Les options sélectionnées sont regroupées dans le tableau.
<script setup>
import { ref } from 'vue'
const cities = ref([])
</script>
<template>
<select v-model="cities" multiple>
<option value="paris">Paris</option>
<option value="tokyo">Tokyo</option>
</select>
</template>Modificateurs de valeur
Les modificateurs affinent la liaison : .trim supprime les espaces, .number convertit en nombre et .lazy synchronise lors d’une modification plutôt qu’à chaque frappe.
<input v-model.number="age" />
<input v-model.trim="username" />
<input v-model.lazy="note" />Un seul modèle mental
Quel que soit le contrôle, v-model reçoit une valeur et renvoie une modification. Le type de contrôle détermine uniquement la forme de la valeur : un booléen, une chaîne ou un tableau.
Composants de saisie personnalisés
v-model fonctionne également avec vos propres composants. Un champ personnalisé déclare une propriété modelValue et émet update:modelValue ; il se comporte ainsi comme un contrôle natif pour son composant parent.
<!-- parent -->
<MyTextInput v-model="name" />
<!-- child declares modelValue + emits update:modelValue -->Vérification rapide
Testez vos connaissances sur la liaison des champs de formulaire.
Récapitulatif
La liaison bidirectionnelle avec les contrôles de formulaire :
- Les champs de texte et les zones de texte lient une chaîne.
- Une seule case à cocher lie un booléen ; plusieurs cases à cocher lient un tableau.
- Les boutons radio partagent une référence contenant la valeur sélectionnée.
- Une liste de sélection lie une valeur ; avec
multiple, elle lie un tableau. - Modificateurs :
.trim,.number,.lazy.
Apprends HTML avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 42
- Leçons
- 156
Questions Fréquemment Posées
La leçon « v-model sur tous les éléments de formulaire » est-elle gratuite ?
Oui — le texte complet de « v-model sur tous les éléments de formulaire » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Vue Academy, passe à CoddyKit PRO. Le cours Vue Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « v-model sur tous les éléments de formulaire » ?
Input, textarea, select, case à cocher, bouton radio — adaptation de v-model à chaque type d’élément. Tu pratiques Vue Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Vue Academy ?
Aucune expérience préalable n'est requise. Vue Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.
Combien de temps prend la leçon « v-model sur tous les éléments de formulaire » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Vue Academy ?
Oui. Chaque leçon Vue Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- v-model sur tous les éléments de formulaire
- Envoi et réinitialisation des formulaires
- Stratégies de validation manuelle
- VeeValidate pour la validation fondée sur un schéma