This article is a detailed and more comprehensive tutorial compiled by the editor in combination with the official documents. It is very suitable for beginners to learn. Interested friends can take a look!
Information comes from the official document:
http://cn.vuejs.org/guide/forms.html
Form binding
① Common binding methods:
【1】Text input box binding;
【2】textarea binding (similar to [1]);
【3】radio selected value binding;
【4】checkbox binding (automatically bundle arrays, no name required);
【5】select binding;
【6】Select multiple multiple selection check box binding;
【7】Dynamic binding (the above types but the same value can interact);
[8] Checkbox selected and unchecked are assigned different values (mainly for the unchecked state);
【9】Checkbox, radio, select selected values dynamically bind (mainly refers to the value dynamic binding object or attribute of a vm instance, such as a certain attribute in data, or a certain value of computed);
As code:
<div id="app"> <input type="text" v-model="text"/> <div>{{text}}</div> <div>――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――� 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>The selected value above is: {{checkboxes}}</div> <div>The value selected above is (displayed in json format, 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 that the value of v-model here should be registered in data, otherwise there will be a red warning (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">The value of value is set to B</option> <option selected value="C">Default selection, value is set to C</option> </select> <div>{{select}}</div> <div>Same, if you do not register here, you will be reported to an error</div> <div>――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――― 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>The value selected in multiple selection is: {{multiple}}</div> <div>Note that this multi-select select box is the default scroll bar with y-axis</div> <div>―――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――― <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 v-model="Dynamic" multiple> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> </select> <div>Select is: {{Dynamic}}</div> <div>――――――――――――――――――――――――――――――</div> <div>Custom checkbox for 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 that the above cannot be used as an array as a variable for multiple checkbox v-models like ordinary checkboxes, and its value is a certain property of the binding and vm instance; therefore, the value in v-bind cannot be a string, but it can be an object, such as {a:1} (of course, the value displayed at this time is also an object) </div> <div>――――――――――――――</div> <div>Customized radio</div> <label><input type="radio" v-bind:value="text" v-model="customize"/> value is 1</label> <label><input type="radio" v-bind:value="textarea" v-model="customize"/> value is 1</label> <div>{{customize}}</div> <div> Similarly, the value can be a property of vm or an object, and select is also valid. (The main three are selected. In addition, although Date type is also selected, it is not very meaningful)</div> <div>――――――――――――――――――――――――――――――――――――――</div> </div> <script> var vm = new Vue({ el: '#app', data: { text: "The default input content", textarea: "Here is multi-line text/n, //n is a newline, but it 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 cancelled, rather than when the key is pressed.
Valid for both text input boxes and textarea
As code:
<input type="text" v-model="text" lazy/> <div>{{text}}</div>【2】number
Automatically convert the input value to number type, and if converted to NaN type, it will return to the original value;
As code:
<input type="text" v-model="text" number/> <div>{{text}}</div> <div>{{typeof text}}</div>If the parameter number is added, then when entering a number, the prompt type is string. After adding it, the pure number will prompt the number type;
【3】debounce=”milliseconds”
When the value does not change for several milliseconds in a row, the change of the value of the variable is triggered;
As code:
<input type="text" v-model="text" debounce="1000"/> <div>{{text}}</div>When I enter the six numbers 1, 2, 3, 4, 5, 6 in sequence with a time difference of 500ms, the value of text will not be updated;
When I stop inputting has 1000ms, the text value will be updated;
Therefore, it is suitable for high-consumption operations such as ajax.
The above is the example analysis of Vuejs and form element examples introduced by the editor to you. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!