Vuejs Article 6 Vuejs and form Element instance parsing, vuejs Article 6

Vuejs Article 6 Vuejs and form Element instance parsing, vuejs Article 6

This article is a more comprehensive and detailed tutorial on detailed Code Compiled by xiaobian in combination with the official documentation. It is very suitable for beginners to learn. Interested friends can take a look at it together!

Materials are available in official documents:

Http://cn.vuejs.org/guide/forms.html

Form binding

① Common binding methods:

[1] text input box binding;

[2] textarea binding (similar to [1 ]);

3. Bind the selected radio value;

[4] checkbox binding (automatically bundling arrays without name );

[5] select binding;

[6] select multiple bind multiple select boxes;

[7] dynamic binding (the same value can interact with different types );

[8] assign different values to the checkbox and unselected values (mainly for the unselected status );

[9] value dynamic binding of checkbox, radio, and select selected States (mainly refers to attributes of objects or vm instances with dynamic value binding, such as a property in data, or a value of computed );

Such as code:

<Div id = "app"> <input type = "text" v-model = "text"/> <div >{{ text }}</div> <div> -------------- </div> <textarea style = "width: 200px; height: 100px; "v-model =" textarea "> </textarea> <div >{{ textarea }}</div> <div> ------------ </div> <label> <input type = "checkbox" v-model = "checkbox"/> on the left, true is selected on the right: {checkbox }</label> <div> -------------- </div> <label> <input type = "checkbox" value = "firstCheckbox" v-model = "checkbox" Es "> 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> the selected value is: {checkboxes }}</div> <div> the above selected values are displayed in json format. The json filter is used here ): {checkboxes | json }}</div> <div> -------------- </div> <label> <input type = "radio" value = "A" v-model = "radio"/> value = A </label> <br> <label> <input type = "radio" value = "B" v- model = "radio"/> value = B </label> <br> <div >{{ radio }}</div> <div> note, here, the value of v-model should be registered in data; otherwise, a red letter will be warned (in fact, all should do the same) </div> <div> -------------- </div> <select v-model = "select"> <option> default value, option does not set value </option> <option value = "B"> value is set to B </option> <option selected value = "C"> This is selected by default, set value to C </option> </select> <div >{{ se Lect }}</div> <div> Similarly, if this parameter is not registered, an error is returned. </div> <div> ------------ </div> <div> The following lists multiple select statements, press ctrl to select consecutive values, and press shift to select a range </div> <select style = "width: 200px; height: 100px; overflow: hidden; "v-model =" multiple "multiple> <option value =" A "> A </option> <option value =" B "> B </option> <option value = "C"> C </option> <option value = "D"> D </option> <option value = "E"> E </option> </select> <div> select multiple values as follows: {multiple }}</div> <div> Note: select s for each multiple. The elect box is a scroll bar with the Y axis by default. </div> <div> ------------ </div> <div> dynamic rendering, checkbox and multiple select boxes affect each other. </div> <label> <input type = "checkbox" value = "A" v-model = "Dynamic"> A </label> <br/> <label> <input type = "checkbox" value = "B" v-model = "Dynamic"> B </label> <br/> <label> <input type = "checkbox" value = "C" v-model = "Dynamic"> C </label> <br/> <select style = "width: 200px; height: 100px; overflow: hidden; "v-model =" Dynamic "multiple> <op Tion value = "A"> A </option> <option value = "B"> B </option> <option value = "C"> C </option> </ select> <div> the selected items are: {Dynamic }}</div> <div> -------------- </div> <div> checkbox with the selected and selected values </div> <label> <input type =" checkbox "v-bind: true-value = "differentValues. t "v-bind: false-value =" differentValues. f "v-model =" different "> true/false </label> <br/> <div> different value: {different }}</div> <div> Note: The above cannot be like a normal checkbox, An array is used as the variable v-model of multiple checkboxes, and its value is bound to an attribute of the vm instance. Therefore, the value in v-bind cannot be a string, but it can be an object, for example, {a: 1} (of course, the value displayed at this time is also an object) </div> <div> -------------- </div> <div> Custom radio </div> <label> <input type = "radio" v-bind: value = "text" v-model = "customize"/> is 1 </label> <input type = "radio" v-bind: value = "textarea" v-model = "customize"/> the value is 1 </label> <div >{{ customize }}</div> <div>, the value can be a vm attribute or an object, and select is also valid. (This is mainly because these three are selected. In addition, although the Date type is also selected, it is of little significance) </div> <div> -------------- </div> <script> var vm = new Vue ({el: '# app', data: {text: "input content by default", textarea: "Here is multi-line text \ n Second line, \ n is a line break, but is displayed as a space in the string", checkboxes: [], radio: "", select: "", multiple: "", Dynamic :{}, different: "", differentValues: {t: "true", f: "false"}, customize: ''}}) </script>

② Add parameters:

[1] lazy

The value is updated only after the focus state is canceled, instead of when the key is pressed.

Valid for both the text input box and textarea

Such as code:

<input type="text" v-model="text" lazy/> <div>{{text}}</div>

[2] number

The input value is automatically converted to the number type. If it is converted to the NaN type, the original value is returned;

Such as code:

<input type="text" v-model="text" number/> <div>{{text}}</div> <div>{{typeof text}}</div>

If the number parameter is added, the string type is displayed when the number is entered. After the string parameter is added, the pure number indicates the number type;

[3] debounce = "millisecond count"

When the value remains unchanged for several consecutive milliseconds, the variable value is changed;

Such as code:

<input type="text" v-model="text" debounce="1000"/> <div>{{text}}</div>

When I input the numbers 1, 2, 3, 4, 5, 6 in sequence with a time difference of MS, the text value will not be updated;

The text value is updated only when the input is stopped for ms;

Therefore, it is suitable for high-consumption operations such as ajax.

The above section describes the parsing of Vuejs and form Element instances in Chapter 6 of Vuejs. I hope this will be helpful to you. If you have any questions, please leave a message, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!