What is the difference between v-bind and v-model in vue

Difference: 1. "v-bind" is a one-way binding, while "v-model" is a two-way binding; 2. "v-bind" can only synchronize data in vue to the page. And "v-model" can not only synchronize data in vue to the page, but also assign user data to 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 a one-way binding, used to bind data and Properties and expressions can only synchronize data in vue to the page.

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

3. v-bind can assign a value to any attribute, while v-model can only perform two-way data binding for elements with a value attribute.

1. v-model

v-model is mostly used in forms. It creates two-way binding on form elements and chooses the correct method to update elements according to the type of control. It can bind text, radio, checkbox, selected

1. Bind text

<input type="text" v-model="val" />
<p> {{val}} </p>

2. Bind radio

<input type="radio" value="one" v-model="radioVal" />
<input type="radio" value="two" v-model="radioVal" />
<label for v-bind="radioval" />

radioval value as the radio button is selected The value will become one or two

3. Bind checkBox

(1) A single check box, the final value is the logical value true and false

<input type="checkbox" v-model="checkVal"/>
<label for="checkbox">{{checkVal}}</label>

(2) When there are multiple check boxes, bind the value to an array

<input type="checkbox" value="apple" v-model="checkArray"/>
<label for="checkbox">{{apple}}</label>

<input type="checkbox" value="banana" v-model="checkArray"/>
<label for="checkbox">{{banana}}</label>

<input type="checkbox" value="pear" v-model="checkArray"/>
<label for="checkbox">{{pear}}</label>

<span>{{checkArray | json}}</span>

The value in checkArray will change relatedly depending on whether it is selected

4. Bind select

(1) Bind to a single select
(2) When binding multiple selects, the same applies to the array

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

About change The difference between events and input events, simply put:

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

(2)number

Change the values ​​entered in the text box into numbers. If it is changed to a number followed by NAN, return the original value

(3)trim

Get the leading and trailing spaces of the input string

---

2. v-bind

1. Bind text

Use v-bind directly or {{}}

<p v-bind="message"></p>
<p>{{message}}</p>

2. Bind attributes

<p v-bind:src="http://...."></p>
<p v-bind:class="http://...."></p>
<p v-bind:style="http://...."></p>

3. Bind expression

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

4. Bind html

<div>{{{ raw_html }}}</div>

At this time, you must use three {}

For more programming-related knowledge, please visit: Programming Video! !

The above is the detailed content of What is the difference between v-bind and v-model in vue. For more information, please follow other related articles on the PHP Chinese website!