Vue sous forme

v-modèle est utilisé dans l'entrée d'instruction, sélectionner, case à cocher, la radio et l'autre élément de commande de forme pour créer un ensemble de données dans les deux sens de liaison, il sélectionne automatiquement la bonne méthode pour mettre à jour le type de commande en fonction des éléments de forme.

v-modèle est essentiellement le sucre syntaxique juste, qui est chargé de surveiller l'événement d'entrée de l'utilisateur de mettre à jour les données, et certains scénarios extrêmes font un traitement spécial.

v-modèle ignore la valeur, vérifié, toutes les valeurs initiales des caractéristiques sélectionnées pour former des éléments de données Vue mais toujours comme un exemple de la source de données. Vous devez être la valeur déclarée initiale de la composante optionnelle des données via JavaScript.

v-modèle à l'intérieur des éléments d'entrée respectifs utilisent des propriétés différentes et lancer des événements différents: texte et de l'élément textarea et la valeur d'attribut à l'aide d'un événement d'entrée; case et la radio et l'utilisation vérifié les événements de modification de propriété, sélectionner et modifier la valeur prop comme un événement.

<div id="app">
    <p>{{ message }}</p>
    <input v-model="message">
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  }
})
</script>

case à cocher unique est lié à une valeur booléenne:

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

Plusieurs cases à cocher, liés 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: []
  }
})

Lorsque la boîte de sélection déroulante radio:

<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' }
    ]
  }
})

Lorsqu'il est lié à un tableau de la boîte de sélection déroulante à choix multiples:

<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: []
  }
})

modificateurs de formulaire:

1. .lazy: Par défaut, v-modèle de la valeur des données de chaque événement d'entrée déclencheront boîte d'entrée de synchronisation, vous pouvez ajouter le modificateur .lazy, ainsi en synchronisation d'événements utilisation de changement.
2. .number: Si l'utilisateur souhaite valeur entrée automatiquement en un type numérique, vous pouvez ajouter au modificateur de nombre v-modèle.

   Ceci est utile, parce que même lorsque le type = « nombre », la valeur de l'élément d'entrée HTML renvoie toujours la chaîne. .

3. .trim: Pour automatiquement filtré et dernière entrée de caractères en blanc par l'utilisateur, peut être ajouté au modificateur garniture v-modèle.