Vue. js forms control binding required every day

Vue. js is required for Form Control binding every day. For details about how to create two-way data binding on form control elements, refer to basic usage.

You can use the v-model command to create two-way data binding on the Form Control Element. It automatically selects the correct method to update elements based on the control type. Despite the magic, v-model is just a syntactic sugar. It updates data in user input events and handles some extreme examples in particular.

Text

Message is: {{ message }}

Checkbox

The logical value is as follows:

{{ checked }}

Multiple check boxes are bound to the same array:

JackJohnMike
Checked names: {{ checkedNames | json }}

new Vue({ el: '...', data: { checkedNames: [] }})

Radio

One
Two
Picked: {{ picked }}

Select

Single choice:

 A B CSelected: {{ selected }}

Multiple selection (bind to an array ):

 A B C
Selected: {{ selected | json }}

Dynamic options, rendering with v-:

  {{ option.text }} Selected: {{ selected }}

new Vue({ el: '...', data: { selected: 'A', options: [  { text: 'One', value: 'A' },  { text: 'Two', value: 'B' },  { text: 'Three', value: 'C' } ] }})

Bind value

For the single-choice button, check box and select box options, the value bound to the v-model is usually a static string (for the selected box, it is a logical value ):

  
  
  ABC

But sometimes we want to bind the value to a dynamic attribute of the Vue instance. In this case, we can use v-bind, and the value of this attribute can be not a string.

Checkbox

// Vm. toggle === vm. a // vm. toggle === vm. B when not selected

Radio

// Vm. pick === vm.

Select Options

 
   123// In the election, typeof vm. selected //-> 'object' vm. selected. number //-> 123

Parameter features

Lazy

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

Number

If you want to automatically convert your input to the Number type (if the original value is NaN, the original value is returned), you can add a feature number:

Debounce

Debounce sets a minimum latency to synchronize the values and data in the input box after each knock. It is useful if high-consumption operations are required for each update (for example, Ajax requests in the input prompt.

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

The above is all of the content in this article. I hope it will help you learn more, and I hope you can learn more about PHP.

For more articles about binding forms and controls required by Vue. js every day, please follow the PHP Chinese website!