如何分析vue中v-bind和v-model的區(qū)別，針對(duì)這個(gè)問(wèn)題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問(wèn)題的小伙伴找到更簡(jiǎn)單易行的方法。

成都創(chuàng)新互聯(lián)于2013年成立，先為石鼓等服務(wù)建站，石鼓等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為石鼓企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問(wèn)題。

區(qū)別：1、“v-bind”是單向綁定，而“v-model”是雙向綁定；2、“v-bind”只能將vue中的數(shù)據(jù)同步到頁(yè)面，而“v-model”不只能將vue中的數(shù)據(jù)同步到頁(yè)面，還可以將用戶數(shù)據(jù)的數(shù)據(jù)賦值給vue中的屬性。

本教程操作環(huán)境：windows7系統(tǒng)、vue2.9.6版，DELL G3電腦。

v-model與v-bind區(qū)別：

1、v-bind是單向綁定，用來(lái)綁定數(shù)據(jù)和屬性以及表達(dá)式，只能將vue中的數(shù)據(jù)同步到頁(yè)面。

2、v-model是雙向綁定，不只能將vue中的數(shù)據(jù)同步到頁(yè)面，而且可以將用戶數(shù)據(jù)的數(shù)據(jù)賦值給vue中的屬性。

3、v-bind可以給任何屬性賦值，v-model只能給具備value屬性的元素進(jìn)行數(shù)據(jù)雙向綁定。

一、v-model

v-model多在表單中使用，在表單元素上創(chuàng)建雙向綁定，根據(jù)控件類型選擇正確的方法更新元素，可以綁定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的值隨著選擇單選框的值，會(huì)變成one 或者 two

3. 綁定checkBox

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

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

（2）多個(gè)勾選框時(shí)，將值綁定到一個(gè)數(shù)組

<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中的值會(huì)根據(jù)是否選中進(jìn)行關(guān)聯(lián)變化

4. 綁定select

（1）綁定到單個(gè)select
（2）綁定多個(gè)select時(shí)，同樣適用數(shù)組

5. 增加參數(shù)

（1）lazy

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

關(guān)于change事件和input事件的區(qū)別，簡(jiǎn)單說(shuō)來(lái)是：

change事件必須是在輸入框失去焦點(diǎn)之后才會(huì)觸發(fā)，而input事件可以實(shí)時(shí)監(jiān)測(cè)。

（2）number

將文本框輸入的值都變?yōu)閿?shù)字，如果是變?yōu)閿?shù)字之后是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.綁定表達(dá)式

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

4.綁定html

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

這個(gè)時(shí)候必須要使用三個(gè){}

關(guān)于如何分析vue中v-bind和v-model的區(qū)別問(wèn)題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒(méi)有解開，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識(shí)。

分享標(biāo)題：如何分析vue中v-bind和v-model的區(qū)別
轉(zhuǎn)載注明：http://jinyejixie.com/article12/podddc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設(shè)、品牌網(wǎng)站制作、網(wǎng)站維護(hù)、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)頁(yè)設(shè)計(jì)公司、網(wǎng)站內(nèi)鏈

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)