Vue中v-model，v-bind，v-on的區別是什么

本篇內容介紹了“Vue中v-model，v-bind，v-on的區別是什么”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

v-model

v-model是進行動態雙向綁定的（只能用在input, textarea, select上），以input為例，進行綁定后，vue對象中data的相應值會與input的輸入同步變動。

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

如果我們在input的輸入框輸入“打游戲”，則在data中message屬性的值也會變為“打游戲”。

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

data {
	message: '今天好困 ',   // 此時message中數據自動更新為"打游戲"
}

v-bind（縮寫為 : ）

通常來說，當我們需要給一個<a href=""></a>標簽賦值時，可以直接給href屬性賦上相應的地址即可，但是這樣，往往會導致代碼不靈活。為了使得標簽的一些屬性可以動態的改變，我們可以在這些標簽加上v-bind屬性。
當data中url屬性改變后，相應的，<a></a>標簽的href值也會改變。

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

類似的，對于其他標簽，我們可以將標簽中的屬性值與vue對象中data相應的值綁定。如下列代碼中的，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（縮寫為@）

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

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

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

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

“Vue中v-model，v-bind，v-on的區別是什么”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！