302. Notes d'étude Vue 08- [Liaison de saisie de formulaire] 2020.04.15

1. Utilisation de base

• Vous pouvez utiliser la directive v-model pour créer une liaison de données bidirectionnelle sur l'entrée de formulaire, la zone de texte et les éléments de sélection. Il sélectionnera automatiquement la bonne méthode pour mettre à jour l'élément en fonction du type de contrôle. Malgré sa magie, le modèle v est essentiellement du sucre syntaxique. Il est chargé d'écouter les événements d'entrée des utilisateurs pour mettre à jour les données et d'effectuer un traitement spécial pour certains scénarios extrêmes.

v-model ignore les valeurs initiales de l'attribut value, vérifié et sélectionné de tous les éléments de formulaire et utilise toujours les données de l'instance Vue comme source de données. Vous devez déclarer la valeur initiale dans l'option data du composant via JavaScript.

v-model utilise en interne différents attributs pour différents éléments d'entrée et génère différents événements:

• Le texte et les éléments textarea utilisent des attributs de valeur et des événements d'entrée;
• la case à cocher et la radio utilisent l'attribut vérifié et l'événement de modification;
• Le champ de sélection a la valeur prop et change comme événement.

Pour les langues qui nécessitent l'utilisation de méthodes de saisie (comme le chinois, le japonais, le coréen, etc.), vous constaterez que le modèle v ne sera pas mis à jour lors de la combinaison de texte de la méthode de saisie. Si vous souhaitez également gérer ce processus, veuillez utiliser l'événement d'entrée.

1.1 Texte

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

1.2 Texte multiligne

<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>

L'interpolation ({{text}}) dans la zone de texte ne prend pas effet et le v-model doit être utilisé à la place.

1.3 Case à cocher

Case à cocher unique, liée au booléen:

<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>

Plusieurs cases à cocher, liées au même tableau:

<div id='example-3'>
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames">
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  <label for="mike">Mike</label>
  <br>
  <span>Checked names: {{ checkedNames }}</span>
</div>

new Vue({
  el: '#example-3',
  data: {
    checkedNames: []
  }
})

1.4 Boutons radio

<div id="example-4">
  <input type="radio" id="one" value="One" v-model="picked">
  <label for="one">One</label>
  <br>
  <input type="radio" id="two" value="Two" v-model="picked">
  <label for="two">Two</label>
  <br>
  <span>Picked: {{ picked }}</span>
</div>

new Vue({
  el: '#example-4',
  data: {
    picked: ''
  }
})

1.5 Boîte de sélection

En cas de sélection unique:

<div id="example-5">
  <select v-model="selected">
    <option disabled value="">请选择</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>

new Vue({
  el: '...',
  data: {
    selected: ''
  }
})

Si la valeur initiale de l'expression du modèle v ne correspond à aucune option, l'élément select sera rendu comme "non sélectionné". Sous iOS, cela empêche l'utilisateur de sélectionner la première option. Parce que dans ce cas, iOS ne déclenchera pas l'événement de modification. Par conséquent, il est plus recommandé de fournir une option désactivée avec une valeur vide comme ci-dessus.

En cas de sélection multiple (liée à un tableau):

<div id="example-6">
  <select v-model="selected" multiple style="width: 50px;">
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <br>
  <span>Selected: {{ selected }}</span>
</div>

new Vue({
  el: '#example-6',
  data: {
    selected: []
  }
})

• Options dynamiques pour le rendu avec v-for:

<select v-model="selected">
  <option v-for="option in options" v-bind:value="option.value">
    {{ option.text }}
  </option>
</select>
<span>Selected: {{ selected }}</span>

new Vue({
  el: '...',
  data: {
    selected: 'A',
    options: [
      { text: 'One', value: 'A' },
      { text: 'Two', value: 'B' },
      { text: 'Three', value: 'C' }
    ]
  }
})

2. Relation de valeur

• Pour les options de bouton radio, de case à cocher et de case de sélection, la valeur liée par v-model est généralement une chaîne statique (car la case à cocher peut également être une valeur booléenne):

<!-- 当选中时，`picked` 为字符串 "a" -->
<input type="radio" v-model="picked" value="a">

<!-- `toggle` 为 true 或 false -->
<input type="checkbox" v-model="toggle">

<!-- 当选中第一个选项时，`selected` 为字符串 "abc" -->
<select v-model="selected">
  <option value="abc">ABC</option>
</select>

Mais parfois, nous pouvons vouloir lier la valeur à un attribut dynamique de l'instance Vue, qui peut être implémenté avec v-bind, et la valeur de cet attribut peut ne pas être une chaîne.

2.1 Case à cocher

<input
  type="checkbox"
  v-model="toggle"
  true-value="yes"
  false-value="no"
>

// 当选中时
vm.toggle === 'yes'
// 当没有选中时
vm.toggle === 'no'

Les attributs de valeur vraie et de valeur fausse ici n'affecteront pas l'attribut de valeur du contrôle d'entrée, car le navigateur n'inclut pas de cases à cocher non cochées lors de la soumission du formulaire. Si vous voulez vous assurer que l'une des deux valeurs du formulaire peut être soumise (c'est-à-dire «oui» ou «non»), utilisez plutôt le bouton radio.

2.2 Boutons radio

<input type="radio" v-model="pick" v-bind:value="a">

// 当选中时
vm.pick === vm.a

2.3 Options de la boîte de sélection

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

3. Modificateur

3.1 .lazy

Par défaut, v-model synchronise la valeur de la zone de saisie avec les données après le déclenchement de chaque événement d'entrée (sauf lorsque la méthode d'entrée ci-dessus combine du texte). Vous pouvez ajouter le modificateur paresseux pour synchroniser après l'événement de modification:

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg">

3.2 .nombre

Si vous souhaitez convertir automatiquement la valeur d'entrée de l'utilisateur en type numérique, vous pouvez ajouter le modificateur de nombre au v-modèle:

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

Ceci est souvent utile car même lorsque type = "nombre", la valeur de l'élément d'entrée HTML renvoie toujours une chaîne. Si cette valeur ne peut pas être analysée par parseFloat (), la valeur d'origine sera retournée.

3.3 .trim

Si vous souhaitez filtrer automatiquement les premier et dernier caractères vierges entrés par l'utilisateur, vous pouvez ajouter un modificateur de trim au v-model:

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

4. Utilisez v-model sur les composants

Si vous n'êtes pas familier avec les composants Vue, vous pouvez ignorer cela pour l'instant.

Le type d'élément d'entrée natif de HTML ne répond pas toujours aux besoins. Heureusement, le système de composants de Vue vous permet de créer des composants d'entrée réutilisables avec un comportement entièrement personnalisable. Ces composants d'entrée peuvent même être utilisés avec le modèle v!

Pour en savoir plus, consultez Composants d'entrée personnalisés dans le guide des composants .

5. Lien de référence

[01] Documentation officielle de la liaison d'entrée de formulaire-Vue.js