Vue中v-model，v-bind，v-on的區(qū)別是什么

本篇內(nèi)容介紹了“Vue中v-model，v-bind，v-on的區(qū)別是什么”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

v-model

v-model是進(jìn)行動(dòng)態(tài)雙向綁定的（只能用在input, textarea, select上），以input為例，進(jìn)行綁定后，vue對(duì)象中data的相應(yīng)值會(huì)與input的輸入同步變動(dòng)。

// HTML
<input type="text" v-model="message">
new Vue({
	data {
		message: ' ', //最開(kāi)始message為空
	} 
})

如果我們?cè)趇nput的輸入框輸入“打游戲”，則在data中message屬性的值也會(huì)變?yōu)?code>“打游戲”。

<input type="text" v-model="message">  / /在input中輸入：打游戲

data {
	message: '今天好困 ',   // 此時(shí)message中數(shù)據(jù)自動(dòng)更新為"打游戲"
}

v-bind（縮寫(xiě)為 : ）

通常來(lái)說(shuō)，當(dāng)我們需要給一個(gè)<a href=""></a>標(biāo)簽賦值時(shí)，可以直接給href屬性賦上相應(yīng)的地址即可，但是這樣，往往會(huì)導(dǎo)致代碼不靈活。為了使得標(biāo)簽的一些屬性可以動(dòng)態(tài)的改變，我們可以在這些標(biāo)簽加上v-bind屬性。
當(dāng)data中url屬性改變后，相應(yīng)的，<a></a>標(biāo)簽的href值也會(huì)改變。

<a v-bind:href="url" rel="external nofollow" >網(wǎng)絡(luò)測(cè)試</a>  //v-bind綁定href。
new Vue({
	...
	data {
		url: "http://www.baidu.com"
		}
})

類似的，對(duì)于其他標(biāo)簽，我們可以將標(biāo)簽中的屬性值與vue對(duì)象中data相應(yīng)的值綁定。如下列代碼中的，class屬性綁定isPlaying，src屬性綁定picUrl

<div class="player_con" :class="{playing:isPlaying}">
    <img src="images/player_bar.png" class="play_bar" />
    <img :src="picUrl" class="cover autoRotate" />
</div>
new Vue({
	...
	data {
		isPlaying: true,
		picUrl:"www.xxx.com"
		}
})

v-on（縮寫(xiě)為@）

v-on屬性綁定是HTML事件，例如：

<!-- 完整語(yǔ)法 -->
<a v-on:click="doSomething(tmp)">123</a>

<!-- 縮寫(xiě) -->
<a @click="doSomething(tmp)">123</a>

new Vue({
	...
	methods:{
	doSomething(tmp){
	}
}
})

“Vue中v-model，v-bind，v-on的區(qū)別是什么”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！