Utilisation de base
Vous pouvez utiliser la directive du modèle V pour créer une liaison de données bidirectionnelle sur les éléments de contrôle de formulaire. Il sélectionne automatiquement la méthode correcte pour mettre à jour l'élément en fonction du type de contrôle. Bien qu'un peu magique, le modèle V n'est que du sucre syntaxique, la mise à jour des données dans les événements d'entrée de l'utilisateur et la gestion de certains exemples extrêmes en particulier.
Texte
<span> Le message est: {{message}} </span> <br> <entrée type = "text" V-model = "message" placeholder = "éditer moi">Cocher
BOIE DE CÉQUIRE UNIQUE, Valeur logique:
<input type = "checkbox" id = "checkbox" v-model = "checked"> <label for = "checkbox"> {{coché}} </ labe>Plusieurs cases à cocher, liées au même tableau:
<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 pour = " V-model = "checkedNames"> <label for = "Mike"> Mike </bablass> <br> <span> Noms vérifiés: {{CheckedNames | JSON}} </span> new vue ({el: '...', data: {checkedNames: []}})Radio
<input type = "radio" id = "one" value = "one" V-model = "pické"> <label for = "one"> one </ labe> <br> <input type = "radio" id = "deux" value = "deux" V-model = "pickée"> <label pour = "Two"> Two </ Label> <br> <panned> Picked: {{{choisie}}}}}}} </ span>Sélectionner
Seul choix:
<sélectionnez V-model = "Sélectionné"> <Option Sélectionné> A </ Option> <Option> B </ Option> <Option> C </ Option> </lect> <span> Sélectionné: {{Selected}} </span>Choix multiple (lier à un tableau):
<sélectionnez V-model = "Sélectionné" Multiple> <Option Sélectionné> A </ Option> <Option> B </ Option> <Option> C </ Option> </ SELECT> <br> <span> sélectionné: {{sélectionné | JSON}} </span>Options dynamiques, rendre avec V-For:
<select v-model = "sélectionné"> <option V-for = "Option in Options" V-Bind: value = "option.value"> {{option.Text}} </ option> </lect> <span> sélectionné: {{sélectionné}} </span> new Vue ({el: '...', data: {sélectionné: 'a', options: [{text: 'one', valeur: 'a'}, {text: 'two', valeur: 'b'}, {text: 'trois', valeur: 'c'}]}})Valeur de liaison
Pour les boutons radio, les cases à cocher et les options de case, la valeur liée par le modèle V est généralement une chaîne statique (une valeur logique pour les cases à cocher):
<! - Lorsqu'il est sélectionné, `Picked` est la chaîne" a "-> <input type =" radio "v-model =" picked "value =" a "> <! -` toggle` est vraie ou false -> <entrée type = "Checkbox" V-model = "toggle"> <! - Lorsqu'il est sélectionné "Selecte value = "ABC"> ABC </opoption> </lect>
Mais parfois, nous voulons lier la valeur à une propriété dynamique de l'instance VUe, qui peut être implémentée à l'aide de la ligne V, et la valeur de cette propriété peut ne pas être une chaîne.
Cocher
<input type = "checkbox" v-model = "toggle" v-bider: true-value = "a" v-bider: false-valey = "b"> // lorsqu'il a sélectionné vm.toggle === vm.a // lorsqu'il n'a pas été sélectionné vm.toggle === vm.b
Radio
<input type = "radio" V-model = "pick" V-bider: value = "a"> // lorsqu'il est sélectionné vm.pick === vm.a
Sélectionner des options
<select v-model = "sélectionné"> <! - objet littéral -> <option v-bider: value = "{nombre: 123}"> 123 </ option> </ select> // lorsque le type sélectionné vm.selected // -> 'object'vm.selected.number // -> 123Caractéristiques des paramètres
paresseux
Par défaut, le modèle V synchronise les valeurs et les données des boîtes d'entrée dans l'événement d'entrée. Vous pouvez ajouter une fonctionnalité paresseuse pour synchroniser dans l'événement de changement:
<! - Mettre à jour dans "Change" au lieu de l'événement "d'entrée" ->
<entrée v-model = "msg" paresseux>
nombre
Si vous souhaitez convertir automatiquement l'entrée de l'utilisateur en type de nombre (revenez à la valeur d'origine si le résultat de conversion de la valeur d'origine est NAN), vous pouvez ajouter un numéro de fonctionnalité:
<entrée V-model = "Age" Number>
Déboucher
Debounce définit un délai minimum, en retardant la valeur et les données de la zone d'entrée après chaque robinet. Il est utile si vous devez effectuer des opérations de haut niveau à chaque mise à jour (comme les demandes AJAX dans une invite d'entrée).
<entrée v-model = "msg" Debounce = "500">
Notez que le paramètre Debounce ne retarde pas l'événement d'entrée: il retarde "l'écriture" les données sous-jacentes. Par conséquent, lors de l'utilisation de déboucher, Vm. $ Watch () doit être utilisé pour répondre aux modifications des données. Si vous souhaitez retarder l'événement DOM, vous devez utiliser le filtre débouffé.
Cet article a été compilé dans le tutoriel d'apprentissage des composants frontaux "Vue.js", et tout le monde est le bienvenu pour apprendre et lire.
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.