Vue.js must learn form control binding every day

Basic Usage

You can use the v-model directive to create two-way data binding on form control elements. Depending on the control type it automatically chooses the correct method to update the element. Although a bit magical, v-model is just syntactic sugar for updating data on user input events and specifically handling some edge cases.

Text

<span>Message is: {{ message }}</span>
<br>
<input type="text" v-model="message" placeholder="edit me">

Checkbox

Single check box, 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 selection:

<select v-model="selected">
 <option selected>A</option>
 <option>B</option>
 <option>C</option>
</select>
<span>Selected: {{ selected }}</span>

Multiple selection (bound 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, rendered 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, check boxes and selection boxes Option, the value bound by v-model is usually a static string (for the check box, it is a logical value):

<!-- 当选中时，`picked` 为字符串 "a" -->
<input type="radio" v-model="picked" value="a">
 
<!-- `toggle` 为 true 或 false -->
<input type="checkbox" v-model="toggle">
 
<!-- 当选中时，`selected` 为字符串 "abc" -->
<select v-model="selected">
 <option value="abc">ABC</option>
</select>

But sometimes we want to bind value To a dynamic attribute of the Vue instance, you can use v-bind to achieve this, and the value of this attribute does not need to be a string.

Checkbox

<input
 type="checkbox"
 v-model="toggle"
 v-bind:true-value="a"
 v-bind:false-value="b">
 
// 当选中时
vm.toggle === vm.a
// 当没有选中时
vm.toggle === vm.b

Radio

<input type="radio" v-model="pick" v-bind:value="a">
 
// 当选中时
vm.pick === vm.a

Select Options

<select v-model="selected">
 <!-- 对象字面量 -->
 <option v-bind:value="{ number: 123 }">123</option>
</select>
 
// 当选中时
typeof vm.selected // -> &#39;object&#39;
vm.selected.number // -> 123

Parameter characteristics

lazy

By default, v-model synchronizes the input box value and data in the input event , you can add a feature lazy to change to synchronization in the change event:

4b7107e20cf911d046bc0d26b4b58958
34a132ecbb6fcd09616f7d654de61a4d

number

If you want to automatically convert the user's input to the Number type (if the conversion result of the original value is NaN, the original value will be returned), you can add a Feature number:

bc3a745ade46aea43913a82bbd8501d0

debounce

debounce Set a minimum delay after each tap Synchronize the value and data of the input box. This is useful if each update requires expensive operations (such as Ajax requests in an input prompt).

82ddc4b28363de60a9d851e978fbb3a6

Note that the debounce parameter does not delay the input event: it delays "writing" the underlying data. Therefore, vm.$watch() should be used to respond to data changes when using debounce. If you want to delay DOM events, you should use the debounce filter.

The above is the entire content of this article. I hope it will be helpful to everyone’s learning. I also hope that everyone will visit the PHP Chinese website.

For more articles related to form control binding that must be learned every day in Vue.js, please pay attention to the PHP Chinese website!