Éléments de formulaire v-model

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 se base sur différentes propriétés afin d’attribuer une valeur à une donnée.

• Champ texte <input type='text'>: l’attribut value du champs
• Boîtes à cocher <input type="checkbox"> et boutons radio <input type="radio">: l’attribut checked
• Liste déroulante <select>: l’attribut value de l’option sélectionnée

v-model est vide au chargement de la page

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.

Champ texte <input type='text'>

Les champs textes <input type='text'> 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>

Dans l'exemple ci-dessous, modifier la valeur du le champ texte mettra à jour le titre automatiquement. Il n’est pas nécessaire d’utiliser une méthode ou une fonction.

See the Pen Vue | v-model champ texte by TIM Montmorency (@tim-momo) on CodePen.

 Liaisons des entrées utilisateur d'un formulaire: champs texte

Case à cocher <input type="checkbox">

Les cases à cocher <input type="checkbox"> 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>

See the Pen Vue | v-model boite à cocher by TIM Montmorency (@tim-momo) on CodePen.

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.

 Liaisons des entrées utilisateur d'un formulaire: case à cocher

Boutons radio <input type="radio">

Les boutons radio <input type="radio"> synchronisent l’attribut value du bouton qui est coché avec la donnée qui leur est associée.

<input type="radio" id="option1" v-model="msg" value="Option 1" />
<input type="radio" id="option2" v-model="msg" value="Option 2" />

<h1>{{ msg }}</h1>

See the Pen Vue | v-model boutons radio by TIM Montmorency (@tim-momo) on CodePen.

 Liaisons des entrées utilisateur d'un formulaire: bouton radio

Liste déroulante <select>

Les listes déroulantes <select> 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>

See the Pen Vue | v-model select by TIM Montmorency (@tim-momo) on CodePen.

 Liaisons des entrées utilisateur d'un formulaire: Liste déroulante