Cet article est un tutoriel détaillé avec des codes plus détaillés compilés par l'éditeur en combinaison avec des documents officiels. Il est très adapté aux débutants à apprendre. Les amis intéressés peuvent jeter un œil!
Les informations proviennent du document officiel:
http://cn.vuejs.org/guide/forms.html
Forme de liaison
① Méthodes de liaison courantes:
【1】 LIAISSANCE DE LA BOIRE D'ENTRIÈRE DE TEXT;
【2】 LIAISSANCE TEXTAREA (similaire à [1]);
【3】 Radio Selected Value liant;
【4】 Cherchez la liaison de la boîte à cocher (récompense automatiquement des tableaux, aucun nom requis);
【5】 Sélectionner la liaison;
【6】 Sélectionnez plusieurs liens à cocher plusieurs sélections de sélection;
【7】 liaison dynamique (les types ci-dessus mais la même valeur peut interagir);
[8] La boîte à cocher sélectionnée et non contrôlée se voient attribuer différentes valeurs (principalement pour l'état non contrôlé);
【9】 Checkbox, radio, sélectionnez les valeurs sélectionnées se lier dynamiquement (se réfère principalement à l'objet de liaison dynamique de valeur ou à l'attribut d'une instance VM, tel qu'un certain attribut dans les données, ou une certaine valeur de calcul);
Comme code:
<div id = "app"> <input type = "text" v-model = "text" /> <div> {{text}} </div> <div> - `` are - `` are value="firstCheckbox" v-model="checkboxes">firstCheckbox</label><br/> <label><input type="checkbox" value="secondCheckbox" v-model="checkboxes">secondCheckbox</label><br/> <label><input type="checkbox" value="thirdCheckbox" v-model="checkboxes">thirdCheckbox</label><br/> <div> La valeur sélectionnée ci-dessus est: {{Checkboxs}} </div> <div> La valeur sélectionnée ci-dessus est (affichée au format JSON, JSON Filter est utilisé ici): {{Checkboxes | JSON}} </div> <div> ―oie> V-model = "radio" /> value = a </ label> <br> <b label> <input type = "radio" value = "b" V-model = "radio" /> value = b </b label> <br> <div> {{radio}} </div> <div> Remarque que la valeur du model V ici devrait être enregistrée dans les données, sinon il y aura un avertissement rouge (en fait, tout le même) </ Don <div> - `` are Ne vous inscrivez pas ici, vous serez signalé à une erreur </div> <div> RET Value = "A"> A </ Option> <Option Value = "B"> B </ Option> <Option Value = "C"> C </ Option> <Option Value = "D"> D </ Option> <Option Value = "E"> E </ Option> </lect> <v> axe y </div> <div> - `` are - `` are <Quelle> <Input Type = "Checkbox" Value = "B" V-model = "Dynamic"> B </Bel> <br/> <Babeld> <Input Type = "Checkbox" Value = "C" V-Model = "Dynamic"> C </ Label> <br/> <Select V-model = "Dynamic" Multiple> <option Value = "A"> a </ Option> <option Value Value = "C"> C </ Option> </lect> <div> SELECT IS: {{Dynamic}} </div> <div> `` `` `` `` `` OUS - `` `` `` `` `` `` `` `` `` `` `` `` `` `` `/ div> V-Bind: false-Value = "DifferentValues.f" V-model = "Different"> true / false </vabe> <br/> <div> Différent Value: {{Different}} </div> <div> Remarque que les boîtes à cocher ordinaires ne peuvent pas être utilisées comme une variable pour les modèles VM et l'installation VM. Par conséquent, la valeur en V-Bind ne peut pas être une chaîne, mais elle peut être un objet, tel que {a: 1} (bien sûr, la valeur affichée pour le moment est également un objet) </v> <div> Radio personnalisée </v> </ label> <`` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `RE LADIER la valeur le texte" le texte "V-Bind" <Label> <input type = "Radio" V-Bind: value = "textArea" V-model = "Personnalise" /> La valeur est 1 </ Label> <div> {{personnaliser}} </div> <div> De même, la valeur peut être une propriété de VM ou d'un objet, et SELECT est également valide. (Les trois principaux sont sélectionnés. En outre, bien que le type de date soit également sélectionné, il n'est pas très significatif) </div> <div> - `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `, les données '', les données: {Text:" Textar ", is: is", is: # is: # is: # is: # is: Data: # Texte multi-lignes / n, // n est une nouvelle ligne, mais il s'affiche comme un espace dans la chaîne ". cocher les boîtes: [], radio:" ", select:" ", multiple:" ", dynamic: {}, différent:" ", différentes valeurs: {t:" true ", f:" false "}, personnaliser: ''}}) </ / script>②Add Paramètres:
【1】 paresseux
La valeur est mise à jour uniquement après l'annulation de l'état de mise au point, plutôt que lorsque la touche est enfoncée.
Valable pour les deux boîtes de saisie de texte et TextArea
Comme code:
<input type = "text" v-model = "text" paresseux /> <div> {{text}} </div>【2】 Numéro
Convertir automatiquement la valeur d'entrée en type de nombre, et si elle est convertie en type nan, elle reviendra à la valeur d'origine;
Comme code:
<input type = "text" v-model = "text" numéro /> <div> {{text}} </div> <div> {{typeof text}} </div>Si le numéro de paramètre est ajouté, lors de la saisie d'un nombre, le type d'invite est une chaîne. Après l'avoir ajouté, le nombre pur invitera le type de nombre;
【3】 Debounce = ”millisecondes»
Lorsque la valeur ne change pas pour plusieurs millisecondes d'affilée, la variation de la valeur de la variable est déclenchée;
Comme code:
<input type = "text" v-model = "text" Debounce = "1000" /> <div> {{text}} </div>Lorsque j'entre les six nombres 1, 2, 3, 4, 5, 6 en séquence avec un décalage horaire de 500 ms, la valeur du texte ne sera pas mise à jour;
Lorsque j'arrête l'entrée a 1000 ms, la valeur du texte sera mise à jour;
Par conséquent, il convient aux opérations de consommation élevée comme l'Ajax.
Ce qui précède est l'exemple d'analyse de VUEJS et des exemples d'éléments de formulaire qui vous sont présentés par l'éditeur. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!