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

Modifier la valeur dans le champ texte mettra à jour le titre sans besoin d’aucune fonction JavaScript.

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>

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.

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>

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>