Two-way binding

Data binding

Rendering data to a page is called data binding, where changes in page content are driven by the bound data.

In Vue we can realize one-way data binding by interpolation {{}} or data binding instructions V-text, V-HTML and V-pre.

Two-way data binding

A two-way data-binding is called a two-lane data-binding or Interactive data-binding.

In the Vue library, all HTML form elements (single-line text box, radio button, checkbox, select, range, textarea) can write v-Model bidirectional binding instructions. Represents a bidirectional binding to the specified data in data. The bidirectionally bound form element’s value is identical to the bound property value in data.

HTML:

JS:

The result is that the drag bar changes the number and moves when the button changes the number.

To verify this, write an input Number object:

The result is that numbers are linked to drag bars and numeric text boxes.

As you can see from the examples above, bidirectional data binding refers to the direction from the background data to the page and the direction of the background data as the user changes the page content through the form. Therefore, data bidirectional binding like this mainly serves the interaction with the user.

Two-way binding of radio buttons

The two-way binding of radio buttons must have a value that matches the value of the binding property as the binding interface. The value of the V-model will have a secret check to see if the value of the bound object matches its own:

 

Check box bidirectional binding

Check box bidirectional binding is divided into two cases, one is bound to a Boolean value, the other is bound to an array.

Check box Boolean bidirectional binding:

 

 

 

Check box array bidirectional binding:

After adding a value to the binding object, the check box can be bidirectionally bound to the array

Two-way binding for the drop-down menu

When you bi-bind the drop-down menu, the V-Model binds the values of the drop-down menu.

[Note] “I in 2020-1929” starts the loop from 1, so the value of the first loop is 1930, which matches the birthyear value in data. A bidirectional binding attribute must find a value that matches its attribute value to be successfully bound.

In this case, the value in select is determined by the value of the option, so essentially the value is used for bidirectional binding.

 

 

 

Some cases where bidirectional binding is not required:

If you simply want to get a value in a text box, you don’t need bidirectional binding and can use the ref attribute.

Ref refers to reference. The same Vue file cannot have the same ref.

Bidirectional binding implementation:

Ref: