javascript - Explication de la documentation officielle de vue sur la valeur de liaison du modèle V

Question

Mais parfois, nous souhaitons lier une valeur à une propriété dynamique de l'instance Vue. Dans ce cas, nous pouvons utiliser v-bind pour y parvenir, et la valeur de cette propriété n'a pas besoin d'être une chaîne.

Questions :
1. Expliquez le paragraphe ci-dessus en détail
2 Combinez les codes suivants pour écrire une démo complète

.

case à cocher

<input
  type="checkbox"
  v-model="toggle"
  v-bind:true-value="a"
  v-bind:false-value="b"
>
// 当选中时
vm.toggle === vm.a
// 当没有选中时
vm.toggle === vm.b

Boutons radio

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

Sélectionnez les paramètres de la liste

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

Answer 1

Il fait référence à la valeur des options radio, case à cocher ou sélection, qui peuvent être une chaîne statique ou des attributs d'instance tels que des données d'instance et des attributs calculés.

En fait, l'exemple suivant a été donné en détail :
<input type="radio" v-model="picked" value="a"> 当用户点选该 radio 时， vm.picked 是字符串 "a"，而 <input type="radio" v-model="pick" v-bind:value="a">, lorsque l'utilisateur sélectionne, vm.pick est l'attribut d'instance de vm.a.

L'exemple de liste de sélection est également facile à comprendre.

En fait, si vous tapez le code et l'exécutez vous-même, vous le comprendrez presque. Cependant, lors de la saisie du code, il peut y avoir des messages d'erreur (s'il n'y a pas de données d'instance de a, il vous demandera que les données liées soient affectées. n'est pas déclaré. Pour le moment, dans les données, ajoutez simplement un a). Ce qui n'est pas très convivial avec Vue pour les apprenants chinois, c'est que les invites d'erreur dans sa console sont toutes en anglais. L'anglais peut être dissuadé.