Vue3 : formulaires

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

Nous pouvons utiliser la directive v-model sur les<input>、<textarea>et<select>éléments de formulaire pour créer une liaison de données bidirectionnelle.

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

v-model ignore les valeurs initiales des attributs value, checked et selected de tous les éléments de formulaire, et utilise à la place les valeurs initiales déclarées dans l'option data.

En interne, v-model utilise différentes propriétés et émet différents événements pour différents éléments de saisie :

  • les éléments text et textarea utilisentvaluepropriété etinputévénement ;
  • checkbox et radio utilisentcheckedpropriété etchangeévénement ;
  • les champs select vontvalueutiliser comme propriété etchangecomme événement.

Entrée

L'exemple montre comment utiliser v-model pour implémenter une liaison de données bidirectionnelle 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 du formulaire de saisie est : {{ message }}</p> <p>élément textarea :</p> <textarea v-model="message2" placeholder="Saisie de texte multiligne..."></textarea> <p>Le message du formulaire textarea est :</p> <p style="white-space: pre">{{ message2 }}</p> </div> <script>const app = { data() { return { message: '', message2: 'Example\r\nhttps://www.example.com' } } } Vue.createApp(app).mount('#app')</script>

Essayez-le vous-même »
L'interpolation ne fonctionne pas dans l'élément textarea ; vous devez utiliser v-model à la place :
<!-- 错误 -->
<textarea>{{ text }}</textarea>

<!-- 正确 -->
<textarea v-model="text"></textarea>

Case à cocher

Si une case à cocher est seule, elle correspond à une valeur booléenne ; si plusieurs, elles sont liées 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>La valeur sélectionnée est : {{ checkedNames }}</span> </div> <script> const app = { data() { return { checked : false, checkedNames: [] } } } Vue.createApp(app).mount('#app') </script>

Essayez-le vous-même »

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

Boutons radio

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

Boutons 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>La valeur sélectionnée est : {{ picked }}</span> </div> <script> const app = { data() { return { picked : 'Example' } } } Vue.createApp(app).mount('#app') </script>

Essayez-le vous-même »

Après sélection, l'effet est affiché 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="site"> <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> const app = { data() { return { selected: '' } } } Vue.createApp(app).mount('#app') </script>

Essayez-le vous-même »

Sélectionnez Example, l'effet de sortie est présenté ci-dessous :

Lorsque la sélection multiple est activée, elle est liée à un tableau :

select

<div id="app"> <select v-model="selected" name="fruit" multiple> <option value="www.example.com">Exemple</option> <option value="www.google.com">Google</option> <option value="www.taobao.com">Taobao</option> </select> <div id="output">Les sites web sélectionnés sont : {{selected}}</div> </div> <script> const app = { data() { return { selected: '' } } } Vue.createApp(app).mount('#app') </script>

Essayez-le vous-même »

Sélectionnez Example et Google :

Utilisez la bouclev-forpour afficher les options :

select

<div id="app" class="demo"> <select v-model="selected"> <option v-for="option in options" :value="option.value"> {{ option.text }} </option> </select> <span>Sélectionné : {{ selected }}</span> </div> <script> const app = { data() { return { selected: 'www.example.com', options: [ { text: 'Example', value: 'www.example.com' }, { text: 'Google', value: 'www.google.com' }, { text: 'Taobao', value: 'www.taobao.com' } ] } } } Vue.createApp(app).mount('#app') </script>

Essayez-le vous-même »

Sélectionner Exemple :

Liaison de valeur

Pour les boutons radio, les cases à cocher et les options de sélection, la valeur liée à v-model est généralement une chaîne statique (pour les cases à cocher, elle peut aussi être un booléen) :

<!-- Lorsqu'il est sélectionné, `picked` est la chaîne "a" -->
<input type="radio" v-model="picked" value="a" />

<!-- `toggle` est vrai ou faux -->
<input type="checkbox" v-model="toggle" />

<!-- Lorsque la première option est sélectionnée, `selected` est la chaîne "abc" -->
<select v-model="selected">
  <option value="abc">ABC</option>
</select>

Mais parfois, nous pouvons vouloir lier la valeur à une propriété dynamique de l'instance active actuelle. Dans ce cas, v-bind peut être utilisé. De plus, v-bind peut lier des valeurs d'entrée à des valeurs non-chaînes.

Case à cocher :

<input type="checkbox" v-model="toggle" true-value="yes" false-value="no" />
...
// 选中时
vm.toggle === 'yes'
// 取消选中 
vm.toggle === 'no'

Radio :

<input type="radio" v-model="pick" v-bind:value="a" />
// 当选中时
vm.pick === vm.a

Sélectionner une option :

<select v-model="selected">
  <!-- 内联对象字面量 -->
  <option :value="{ number: 123 }">123</option>
</select>
// 当被选中时
typeof vm.selected // => 'object'
vm.selected.number // => 123

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 lors de 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 le résultat de la conversion de la valeur d'origine est NaN, la valeur d'origine est renvoyée), vous pouvez ajouter un modificateur number à v-model pour traiter la valeur d'entrée :

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

C'est souvent utile car lorsque 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 de début et de fin de la saisie utilisateur, vous pouvez ajouter un modificateur trim à v-model pour filtrer l'entrée :

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