溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家介紹Vue中怎么實現屬性綁定和雙向數據綁定，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。
使用實例中的data可進行數據綁定
使用v-model：進行雙向數據綁定
監聽事件：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會監聽，使count的數值＋1
count的初始值為0
當改變firstName時，count+1
改變lastName時count+1
同時也會看到fullName會跟隨輸入內容的變化而變化，這就實現了雙向數據綁定。
關于Vue中怎么實現屬性綁定和雙向數據綁定就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
