Vue中的v-model，v-bind，v-on的區(qū)別解析

更新時間：2022年12月02日 16:55:45 作者：起個名字好難__

vue.js是一套構建用戶界面的框架，只關注視圖層，它不僅易于上手，還便于與第三方庫或既有項目整合，vue.js有配套的第三方類庫，可以整合起來做大型項目的開發(fā)，這篇文章主要介紹了v-model，v-bind，v-on的區(qū)別,需要的朋友可以參考下

v-model

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

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

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

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

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

v-bind（縮寫為 : ）

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

<a v-bind:href="url" rel="external nofollow" >網(wǎng)絡測試</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){
	}
}
})

總結

總結來說，v-model用來進行data數(shù)據(jù)與頁面數(shù)據(jù)的雙向綁定。即數(shù)據(jù)對數(shù)據(jù)綁定。v-bind是data數(shù)據(jù)對頁面標簽中屬性的綁定，即屬性對數(shù)據(jù)綁定。v-on，是methods對頁面事件的綁定，即事件對接口（methods）的綁定

到此這篇關于v-model，v-bind，v-on的區(qū)別的文章就介紹到這了,更多相關v-model，v-bind，v-on內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: