Éléments de formulaire

v-model permet de créer une relation bidirectionnelle entre une donnée et un élément de formulaire (input, select, textarea, etc.).

v-model ignore la valeur initiale attribuée à un élément de formulaire. La synchronisation entre l’élément et la donnée ne débute que lors de la première modification de l’élément.

v-model se base sur différentes propriétés afin d’attribuer une valeur à une donnée.

• Champ texte: l’attribut value du champs
• Boîtes à cocher et boutons radio: l’attribut checked
• Menu déroulant: l’attribut value de l’option sélectionnée

Champ texte

Les champs textes synchronisent la valeur contenue dans l'attribut value avec la donnée qui lui est associée dans l'app.

Par exemple, la donnée msg change de valeur en fonction du changement de value dans le champ suivant.

<input type="text" v-model="msg" /> <h1>{ { msg } }</h1> Ne pas mettre un espace entre les deux accolades ouvrantes ni entre les deux accolades fermantes.

Champs texte Boite à cocher

Les boites à cocher synchronisent l’attribut checked avec la donnée qui leur est associée.

<input type="checkbox" v-model="msg" /> <h1>Afficher le meme: { { msg } }</h1> Ne pas mettre un espace entre les deux accolades ouvrantes ni entre les deux accolades fermantes.

Leur usage est tout indiqué entre autres pour déterminer si un élément devrait être affiché ou masqué à l'aide d'un v-if.

Boite à cocher Boutons radio

Les boutons radio synchronisent l’attribut value du bouton qui est coché avec la donnée qui leur est associée.

<input type="radio" id="option" v-model="msg" value="Texte 1" /> <input type="radio" id="option" v-model="msg" value="Texte 2" /> <h1>{ { msg } }</h1> Ne pas mettre un espace entre les deux accolades ouvrantes ni entre les deux accolades fermantes.


Boutons radio Menu déroulant

Les menus déroulants synchronisent l’attribut value de l'option sélectionnée avec la donnée qui leur est associée.

<select v-model="msg"> <option value="Texte 1">Écouteurs</option> <option value="Texte 2">Squid Game</option> </select> <h1>{ { msg } }</h1> Ne pas mettre un espace entre les deux accolades ouvrantes ni entre les deux accolades fermantes.
Menu déroulant