Front-end development in the Vue, the form of input is the basis of common features and usage of paper, a small example of a simple, brief v-model data binding, only to learn to share, if inadequate, please correct me.
Basic usage
You can use the v-model command in the form <input>, <textarea> and <select> to create a two-way data binding on the element. It automatically selects the correct method to update the control type elements. While some magic, but the v-model is essentially just syntax sugar. It is responsible for monitoring the user's input event to update the data, and some extreme scenarios do some special treatment. v-model ignores all the value of the form elements, checked, and initial values of the selected attribute data Vue always as an example of the data source. You should declare the initial value of the option component of the data via JavaScript. v-model used internally for different input element and throw different properties of different events, as follows:
- text and textarea elements using the property value and input events;
- checkbox and radio use checked property and change events;
- select field value as a prop and change as an event.
text
Binding bidirectional input by the v-model value and the value msg, as follows:
1 <input v-model="msg" placeholder="edit me"> 2 <p>Message is: {{ msg }}</p>
Multiple lines of text
Bidirectional binding by v-model value and the value of textarea msg, as follows:
1 <span>多行信息如下:</span> 2 <p style="white-space: pre-line;">{{ msg }}</p> 3 <textarea v-model="msg" placeholder="add multiple lines"></textarea>
Note: white-space: pre-line; represents: consolidated blank character sequence, but retains the line breaks.
Interpolation text area (<textarea> {{text}} </ textarea>) does not take effect, instead of v-model application.
Check box
A single box, is bound to a Boolean value, as follows:
1 <input type="checkbox" id="checkbox" v-model="checked"> 2 <label for="checkbox">{{ checked }}</label>
Note: for = "checkbox" and said it would label input binding. v-model = "checked" is checked for the defined attributes.
Multiple checkboxes, bound to the same array:
1 <div id='example-3'> 2 <input type="checkbox" id="jack" value="Jack" v-model="checkedNames"> 3 <label for="jack">Jack</label> 4 <input type="checkbox" id="john" value="John" v-model="checkedNames"> 5 <label for="john">John</label> 6 <input type="checkbox" id="mike" value="Mike" v-model="checkedNames"> 7 <label for="mike">Mike</label> 8 <br> 9 <span>选种名称: {{ checkedNames }}</span> 10 </div>
single button
v-model = "picked" represents the binding value of the value of the radio button selection items picked to
1 <div id="example-4"> 2 <input type="radio" id="one" value="One" v-model="picked"> 3 <label for="one">One</label> 4 <input type="radio" id="two" value="Two" v-model="picked"> 5 <label for="two">Two</label> 6 <br> 7 <span>Picked: {{ picked }}</span> 8 </div>
Drop-down selection box
When the radio, and the value of the selected selection item bindings, as follows:
1 <select v-model="selected"> 2 <option disabled value="">请选择</option> 3 <option>A</option> 4 <option>B</option> 5 <option>C</option> 6 </select> 7 <span>Selected: {{ selected }}</span>
If the initial value of the v-model expression fails to match any options, <select> element will be rendered as "unchecked" state. In iOS, it will be unable to select the first option. Because this case, iOS does not trigger a change event. Therefore, it is recommended to provide such a value is empty disable an option like the one above.
When multiple selections (bound to an array), as follows:
1 <select v-model="selected1" multiple style="width: 50px;"> 2 <option>A</option> 3 <option>B</option> 4 <option>C</option> 5 </select> 6 <br> 7 <span>Selected: {{ selected1 }}</span>
Options v-for dynamic rendering:
1 <select v-model="selected"> 2 <option v-for="option in options" v-bind:value="option.value"> 3 {{ option.text }} 4 </option> 5 </select> 6 <span>Selected: {{ selected }}</span>
Value binding
For radio buttons, check boxes and select options, the value of v-model binding generally static strings (for check boxes can also be a Boolean value):
1 <! - When selected, `picked` string of" A " -> 2 < INPUT type =" Radio " V-Model =" the Picked " value =" A " > . 3 <-! ` Toggle` true or to false -> . 4 < INPUT type = "CheckBox" V-Model = "Toggle" > . 5 - <! when selected, the first option, `selected` string of" ABC " -> . 6 < SELECT V-Model = "Selected" > . 7 < Option value = "ABC">ABC</option> 8 </select>
But sometimes we might want to be bound to a dynamic value property Vue instance, this time can be achieved by v-bind, and the value of this property can not string.
1 <input type="checkbox" v-model="toggle" true-value="yes" false-value="no">
// When selected vm.toggle === 'yes' // When not selected vm.toggle === 'no'
Here the true-value and false-value attribute does not affect the value attribute input control, because the browser does not include a check box is not selected when submitting the form. If you want to make sure that a form can be submitted to the two values, (such as "yes" or "no"), replace it with a radio button.
1 <input type="radio" v-model="picked" v-bind:value="a">
When selected vm.pick === vm.a
1 <select v-model="selected"> 2 <!-- 内联对象字面量 --> 3 <option v-bind:value="{ number: 123 }">123</option> 4 </select>
// When selected typeof vm.selected // => 'object' vm.selected.number // => 123
Modifiers
, V-model synchronized (in addition to the above-mentioned combination of text input) the value of each input data block is inputted after the trigger event by default. You can add a modifier lazy, so use change into a synchronized event:
1 <! - update instead of "input" at "Change" -> 2 < INPUT V-model.lazy = "MSG" type = "text" >
If the user wants to automatically input value into a numeric type, number modifier may be added to the v-model:
1 <input v-model.number="age" type="number">
This is often useful, because even when type = "number", HTML input element's value will always return the string. If this value can not be parseFloat () parses the original value is returned.
To automatically filtered inclusive whitespace characters input by a user, the modifier may be added to trim v-model:
1 <input type="text" v-model.trim="msg">
About variables used in examples, as follows:
1 <script type="text/javascript"> 2 var app = new Vue({ 3 el: '#app', 4 data: { 5 msg: 'hello world!!!', 6 checked:true, 7 checkedNames: [], 8 picked: '', 9 a:"hello", 10 selected: '', 11 selected1: [], 12 toggle:false, 13 age:0, 14 options: [ 15 { text: 'One', value: 'A' }, 16 { text: 'Two', value: 'B' }, 17 { text: 'Three', value: 'C' } 18 ] 19 }, 20 }); 21 </script>
Remark
A flute Jianping, a business, a negative to make crazy name for fifteen years.