vue中v-bind和v-model的區別是什麼

區別：1、「v-bind」是單向繫結，而「v-model」是雙向繫結；2、「v-bind」只能將vue中的資料同步到頁面，而「v-model」不只能將vue中的資料同步到頁面，還可以將使用者資料的資料賦值給vue中的屬性。

本教學操作環境：windows7系統、vue2.9.6版，DELL G3電腦。

v-model與v-bind區別：

1、v-bind是單向繫結，用來繫結資料和屬性以及表示式，只能將vue中的資料同步到頁面。

2、v-model是雙向繫結，不只能將vue中的資料同步到頁面，而且可以將使用者資料的資料賦值給vue中的屬性。

3、v-bind可以給任何屬性賦值，v-model只能給具備value屬性的元素進行資料雙向繫結。

一、v-model

v-model多在表單中使用，在表單元素上建立雙向繫結，根據控制元件型別選擇正確的方法更新元素，可以繫結text、radio、checkbox、selected

1. 繫結text

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

2. 繫結radio

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

radioval的值隨著選擇單選框的值，會變成one 或者 two

3. 繫結checkBox

（1）單個勾選框，最終的值為邏輯值true和false

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

（2）多個勾選框時，將值繫結到一個陣列

<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>

checkArray中的值會根據是否選中進行關聯變化

4. 繫結select

（1）繫結到單個select
（2）繫結多個select時，同樣適用陣列

5. 增加引數

（1）lazy

將輸入框的input事件改為change事件，使得輸入框在change事件中更新而不是input

關於change事件和input事件的區別，簡單說來是：

change事件必須是在輸入框失去焦點之後才會觸發，而input事件可以實時監測。

（2）number

將文字方塊輸入的值都變為數位，如果是變為數位之後是NAN，則返回原始值

（3）trim

取出輸入的字串的首尾空格

二、v-bind

1.繫結文字

直接用v-bind或者{{}}

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

2.繫結屬性

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

3.繫結表示式

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

4.繫結html

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

這個時候必須要使用三個{}

更多程式設計相關知識，請存取：！！

以上就是vue中v-bind和v-model的區別是什麼的詳細內容，更多請關注TW511.COM其它相關文章！