Basic usage
You can use the v-model directive to create two-way data binding on form control elements. It automatically selects the correct method to update the element according to the control type. Although a bit magical, v-model is nothing but syntactic sugar, updating data in user input events, and handling some extreme examples in particular.
Text
<span>Message is: {{ message }}</span><br><input type="text" v-model="message" placeholder="edit me">Checkbox
Single checkbox, logical value:
<input type="checkbox" id="checkbox" v-model="checked"><label for="checkbox">{{ checked }}</label>Multiple check boxes, bound to the same array:
<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 | json }}</span> new Vue({ el: '...', data: { checkedNames: [] }})Radio
<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>Select
Single choice:
<select v-model="selected"> <option selected>A</option> <option>B</option> <option>C</option></select><span>Selected: {{ selected }}</span>Multiple choice (bind to an array):
<select v-model="selected" multiple> <option selected>A</option> <option>B</option> <option>C</option></select><br><span>Selected: {{ selected | json }}</span>Dynamic options, render with v-for:
<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' } ] }})Bind value
For radio buttons, checkboxes and box options, the value bound by v-model is usually a static string (a logical value for checkboxes):
<!-- When selected, `picked` is the string "a" --><input type="radio" v-model="picked" value="a"><!-- `toggle` is true or false --><input type="checkbox" v-model="toggle"><!-- When selected, `selected` is the string "abc" --><select v-model="selected"> <option value="abc">ABC</option></select>
But sometimes we want to bind value to a dynamic property of the Vue instance, which can be implemented using v-bind, and the value of this property may not be a string.
Checkbox
<input type="checkbox" v-model="toggle" v-bind:true-value="a" v-bind:false-value="b">// When selected vm.toggle === vm.a// When not selected vm.toggle === vm.b
Radio
<input type="radio" v-model="pick" v-bind:value="a">// When selected vm.pick === vm.a
Select Options
<select v-model="selected"> <!-- Object literal --> <option v-bind:value="{ number: 123 }">123</option></select>// When selected typeof vm.selected // -> 'object'vm.selected.number // -> 123Parameter Characteristics
lazy
By default, v-model synchronizes input box values and data in the input event. You can add a feature lazy to synchronize in the change event:
<!-- Update in "change" instead of "input" event -->
<input v-model="msg" lazy>
number
If you want to automatically convert the user's input to Number type (return to the original value if the conversion result of the original value is NaN), you can add a feature number:
<input v-model="age" number>
Debounce
debounce Sets a minimum delay, delaying the input box value and data after each tap. It is useful if you have to perform high-consuming operations every update (such as Ajax request in an input prompt).
<input v-model="msg" debounce="500">
Note that the debounce parameter does not delay the input event: it delays "writing" the underlying data. Therefore, when using debounce, vm.$watch() should be used to respond to changes in data. If you want to delay the DOM event, you should use the debounce filter.
This article has been compiled into the "Vue.js Front-end Component Learning Tutorial", and everyone is welcome to learn and read.
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.