溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家介紹Vue中怎么實現(xiàn)屬性綁定和雙向數(shù)據(jù)綁定，內(nèi)容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。
使用實例中的data可進行數(shù)據(jù)綁定
使用v-model：進行雙向數(shù)據(jù)綁定
監(jiān)聽事件：watch
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Vue學習</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="root">
姓：<input v-model="firstName" />
名：<input v-model="lastName" />
<div>{{fullName}}</div>
<div>{{count}}</div>
</div>
</body>
<script>
new Vue({
el:"#root",
data:{
firstName:'',
lastName:'',
count:0
},
computed:{
fullName:function(){
return this.firstName + ' '+ this.lastName
}
},
watch:{
fullName:function(){
this.count++
}
}
})
</script>
</html>
當full Name改變時，watch會監(jiān)聽，使count的數(shù)值＋1
count的初始值為0
當改變firstName時，count+1
改變lastName時count+1
同時也會看到fullName會跟隨輸入內(nèi)容的變化而變化，這就實現(xiàn)了雙向數(shù)據(jù)綁定。
關于Vue中怎么實現(xiàn)屬性綁定和雙向數(shù)據(jù)綁定就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內(nèi)容。
