Next, the previous content: https://www.cnblogs.com/yanggb/p/12586416.html.
Input binding of forms
The input binding of forms is a very important part, because all business systems are inseparable from the input function of basic forms, so it is necessary to carefully grasp the relevant knowledge points.
Basic usage
You can use the [v-model] instruction to create a two-way data binding on the form <input>, <textarea> and <select> elements. It will automatically select the correct way to update the elements according to the type of control (element). Although it may seem magical, v-model is actually just a syntactic sugar (integrating complex syntax into simple syntax). It is responsible for listening to user's input events to update data and processing some extreme scenarios.
v-model ignores the initial values of the value, checked, and selected attributes of all form elements, and always uses the data of the Vue instance as the data source. You should declare the initial value in the data option of the component through JavaScript.
Before you understand v-model, you should especially remember this sentence in the official document. Many problems in the development process are related to this notice.
In fact, the [v-model] instruction internally uses different attributes for different input elements and throws different events:
1. The text and textarea elements use the value attribute and the input event.
2.checkbox and radio use checked property and change event.
3.select field takes value as prop and change as event.
In addition, it should be noted that for languages requiring input methods (such as Chinese, Japanese, Korean, etc.), the [v-model] instruction will not be updated in the process of combining text with input methods. If you want to handle this process, use the [input] event.
text
<input v-model="message" placeholder="edit me"> <p>Message is: {{ message }}</p>
Multiline text
<span>Multiline message is:</span> <p style="white-space: pre-line;">{{ message }}</p> <textarea v-model="message" placeholder="add multiple lines"></textarea>
Note here that unlike the use of native < textarea >, interpolation in the text area (< textarea > {}} < / textarea >) does not take effect and must be replaced by the [v-model] instruction.
check box
Single check box, bound to Boolean:
<input type="checkbox" id="checkbox" v-model="checked"> <label for="checkbox">{{ checked }}</label>
Multiple checkboxes bound to the same array:
<div id='example-3'> <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 for="john">John</label> <input type="checkbox" id="mike" value="Mike" v-model="checkedNames"> <label for="mike">Mike</label> <br> <span>Checked names: {{ checkedNames }}</span> </div>
new Vue({ el: '#example-3', data: { checkedNames: [] } })
The value checked on the page will be added to the array as a single element. For example, if Jack and John are checked on the page, the value of the array will be ["Jack", "John"]. Similarly, removing the tick will remove the corresponding value element from the array. In addition, if you need a default value, you only need to add the corresponding tick value element when initializing the array.
radio button
<div id="example-4"> <input type="radio" id="one" value="One" v-model="picked"> <label for="one">One</label> <br> <input type="radio" id="two" value="Two" v-model="picked"> <label for="two">Two</label> <br> <span>Picked: {{ picked }}</span> </div>
new Vue({ el: '#example-4', data: { picked: '' } })
Drop down selection box
Single vote:
<div id="example-5"> <select v-model="selected"> <option disabled value="">Please choose</option> <option>A</option> <option>B</option> <option>C</option> </select> <span>Selected: {{ selected }}</span> </div>
new Vue({ el: '...', data: { selected: '' } })
Note here that if the initial value of the bound expression in the [v-model] instruction fails to match any option, the < Select > element will be rendered as [unselected]. This state prevents the user from selecting the first option in ios, because ios does not trigger the change event in this case. Therefore, it is generally recommended to provide a disable option with a null value as in the above example.
When multiple selections (bound to an array):
<div id="example-6"> <select v-model="selected" multiple style="width: 50px;"> <option>A</option> <option>B</option> <option>C</option> </select> <br> <span>Selected: {{ selected }}</span> </div>
new Vue({ el: '#example-6', data: { selected: [] } })
You need to press and hold shift on the keyboard to select multiple items. Like the previous check box, the value value of the selected item will be added to the array as an element, otherwise it will be removed from the array.
Use the [v-for] command to render dynamic options:
<select v-model="selected"> <option v-for="option in options" v-bind:value="option.value"> {{ option.text }} </option> </select> <span>Selected: {{ selected }}</span>
new Vue({ el: '...', data: { selected: 'A', options: [ { text: 'One', value: 'A' }, { text: 'Two', value: 'B' }, { text: 'Three', value: 'C' } ] } })
Have you noticed that the [v-model] instruction is not used here, but the [v-bind:value] instruction is used, because the binding is a dynamic property of the object.
Value binding
For radio buttons, check boxes, and selection box options, the value bound by the [v-model] instruction is usually a static string (or a Boolean value for the check box):
<!-- When selected, picked String"a" --> <input type="radio" v-model="picked" value="a"> <!-- toggle by true or false --> <input type="checkbox" v-model="toggle"> <!-- When the first option is selected, selected String"abc" --> <select v-model="selected"> <option value="abc">ABC</option> </select>
But sometimes we may want to bind the value to a dynamic attribute of the vue instance. At this time, we can use the [v-bind] instruction to implement, and the value of this attribute can not be a string.
Value binding - check box
<input type="checkbox" v-model="toggle" true-value="yes" false-value="no">
// When selected vm.toggle === 'yes' // When not selected vm.toggle === 'no'
The true value and false value properties here do not affect the value properties of the input control, because browsers do not include unchecked checkboxes when submitting forms. If you want to ensure that one of these two values in the form can be submitted (such as yes or no), use the radio button instead.
Value binding - radio button
<input type="radio" v-model="pick" v-bind:value="a">
// When selected vm.pick === vm.a
Value binding - options for the drop-down selection box
<select v-model="selected"> <!-- Inline object literal --> <option v-bind:value="{ number: 123 }">123</option> </select>
// When selected typeof vm.selected // 'object' vm.selected.number // 123
In the official documents, the examples of drop-down selection box < Select > are all the instructions of [v-bind:value], which can be regarded as the support of drop-down selection box for [v-model] is not good.
Modifier [. lazy]
By default, the [v-model] instruction will synchronize the value of the input box with the data after each input event is triggered (except when the above input method combines text). If you want to trigger data synchronization after the whole input is completed, you can use the [. lazy] modifier to manually change to use the change event.
<! -- update when changing instead of input -- > <input v-model.lazy="msg" >
Modifier [. nubmer]
If you want to automatically change the user's input value to numeric type, you can add the [. number] modifier to the [v-model] command.
<input v-model.number="age" type="number">
This modifier is usually useful because even in [type="number"], the value of an html input element always returns a string. If the value cannot be parsed by the parseFloat() function, the original value is returned.
Modifier [. trim]
If you want to automatically filter the first and last blank characters entered by the user, you can add the [. trim] modifier to the [v-model] command.
<input v-model.trim="msg">
Use the [v-model] command on the component
The native input element types of html do not always meet the requirements, so vue's component system allows developers to create reusable input components with fully customized behavior. These components can even be used with [v-model].
This aspect of knowledge will be involved when learning components. Here, we first know that you can use the [v-model] instruction on components.
"I still like you very much, even though I have tasted bitterness, it's as sweet as Yi. "