Shulou(Shulou.com)06/02 Report--

How to analyze the difference between v-bind and v-model in vue? aiming at this problem, this article introduces the corresponding analysis and solution in detail, hoping to help more partners who want to solve this problem to find a more simple and feasible method.

Differences: 1, "v-bind" is an one-way binding, and "v-model" is a two-way binding; 2, "v-bind" can only synchronize the data in vue to the page, while "v-model" can not only synchronize the data in vue to the page, but also assign the data of user data to the attributes in vue.

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

The difference between v-model and v-bind:

1. V-bind is an one-way binding, which is used to bind data and attributes as well as expressions. Only data in vue can be synchronized to the page.

2. V-model is a two-way binding, which can not only synchronize the data in vue to the page, but also assign the data of user data to the attributes in vue.

3. V-bind can assign values to any attribute, and v-model can only bind data to elements with value attributes.

1. V-model

V-model is mostly used in forms. Create two-way bindings on form elements, and update elements according to the type of controls. You can bind text, radio, checkbox, and selected.

1. Bind text

{{val}}

two。 Bind radio

The value of radioval changes to one or two as you select the value of the checkbox

3. Bind checkBox

(1) A single check box, and the final values are logical values true and false

{{checkVal}}

(2) bind values to an array when multiple check boxes are checked.

{{apple}} {{banana}} {{pear}} {{checkArray | json}}

The values in checkArray are associated with changes based on whether they are selected or not

4. Bind select

(1) bind to a single select

(2) arrays are also applicable when binding multiple select

5. Add parameters

(1) lazy

Change the input event of the input box to the change event so that the input box is updated in the change event instead of input

The difference between the change event and the input event is simply:

The change event must be triggered after the input box loses focus, while the input event can be monitored in real time.

(2) number

Change the value entered in the text box to a number, and return the original value if it is changed to a number followed by NAN

(3) trim

Take out the leading and trailing spaces of the entered string

II. V-bind

1. Bind text

Directly use v-bind or {{}}

{{message}}

two。 Bind attribute

3. Binding expression

{{number + 1}} {{ok? 'YES':' NO'}} {{message.split (''). Reverse (). Join (')}}

4. Bind html

{raw_html}

Three {} must be used at this time.

This is the answer to the question on how to analyze the difference between v-bind and v-model in vue. I hope the above content can be of some help to you. If you still have a lot of doubts to be solved, you can follow the industry information channel to learn more about it.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.