Formulaires Vue.js

Dans cette section, nous présentons l'application des formulaires Vue.js.

Vous pouvez utiliser la directive v-model pour créer des liaisons de données bidirectionnelles sur les éléments de contrôle de formulaire.

v-model sélectionne automatiquement la méthode correcte pour mettre à jour l'élément en fonction du type de contrôle.

Champs de saisie

L'exemple illustre la liaison de données bidirectionnelle à l'aide de v-model sur les éléments input et textarea :

<div id="app"> <p>élément input :</p> <input v-model="message" placeholder="Modifiez-moi..."> <p>Le message est : {{ message }}</p> <p>élément textarea :</p> <p style="white-space: pre">{{ message2 }}</p> <textarea v-model="message2" placeholder="Saisie de texte multiligne..."></textarea> </div> <script>new Vue({ el: '#app', data: { message: 'Example', message2: 'Example\r\nhttp://www.example.com' } })</script>

Essayez-le »

Case à cocher

Une case à cocher peut être une valeur booléenne, et plusieurs cases à cocher se lient au même tableau :

Case à cocher

L'exemple suivant illustre la liaison de données bidirectionnelle des cases à cocher :

<div id="app"> <p>Case à cocher unique :</p> <input type="checkbox" id="checkbox" v-model="checked"> <label for="checkbox">{{ checked }}</label> <p>Plusieurs cases à cocher :</p> <input type="checkbox" id="example" value="Example" v-model="checkedNames"> <label for="example">Exemple</label> <input type="checkbox" id="google" value="Google" v-model="checkedNames"> <label for="google">Google</label> <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames"> <label for="taobao">taobao</label> <br> <span>Valeurs sélectionnées : {{ checkedNames }}</span> </div> <script> new Vue({ el: '#app', data: { checked : false, checkedNames: [] } }) </script>

Essayez-le »

L'effet de cocher les cases à cocher dans l'exemple est présenté ci-dessous :

Bouton radio

L'exemple suivant illustre la liaison de données bidirectionnelle des boutons radio :

Bouton radio

<div id="app"> <input type="radio" id="example" value="Example" v-model="picked"> <label for="example">Exemple</label> <br> <input type="radio" id="google" value="Google" v-model="picked"> <label for="google">Google</label> <br> <span>Valeur sélectionnée : {{ picked }}</span> </div> <script> new Vue({ el: '#app', data: { picked : 'Example' } }) </script>

Essayez-le »

Après la sélection, l'effet est comme indiqué ci-dessous :

Liste de sélection

L'exemple suivant démontre la liaison de données bidirectionnelle d'une liste déroulante :

select

<div id="app"> <select v-model="selected" name="fruit"> <option value="">Sélectionnez un site web</option> <option value="www.example.com">Exemple</option> <option value="www.google.com">Google</option> </select> <div id="output">Le site web sélectionné est : {{selected}}</div> </div> <script> new Vue({ el: '#app', data: { selected: '' } }) </script>

Essayez-le »

Exemple de sélection, l'effet de sortie est comme indiqué ci-dessous :

Modificateurs

.lazy

Par défaut, v-model synchronise la valeur d'entrée avec les données lors de l'événement input, mais vous pouvez ajouter un modificateur lazy pour synchroniser plutôt sur l'événement change :

<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >

.number

Si vous souhaitez convertir automatiquement la valeur saisie par l'utilisateur en type Number (si la valeur d'origine est convertie en NaN, la valeur d'origine est renvoyée), vous pouvez ajouter un modificateur number à v-model pour gérer la valeur saisie :

<input v-model.number="age" type="number">

Ceci est généralement utile car avec type="number", la valeur saisie en HTML est toujours renvoyée sous forme de chaîne de caractères.

.trim

Si vous souhaitez filtrer automatiquement les espaces en début et en fin de la saisie utilisateur, vous pouvez ajouter le modificateur trim à v-model pour filtrer la saisie :

<input v-model.trim="msg">
Autres extensions