溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“v-model結構是怎樣的”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“v-model結構是怎樣的”吧！
我們知道，v-model只是bind屬性與value的語法糖，并在觸發input事件時設置數據屬性。但是，在render函數沒有這樣的簡寫，我們需要自己實現。
v-model結構
假設，在vue中，我們有如下的結構：
<template>
<inputv-model='myBoundProperty'/>
</template>
v-mode代碼
上面代碼等價于：
<template>
<input:value="myBoundProperty"@input="myBoundProperty=$event.target.value"/>
</template>
在render函數中可以用下面方式來實現上面的代碼：
render(h){
returnh('input',{
domProps:{
value:this.myBoundProperty
},
on:{
input:e=>{
this.myBoundProperty=e.target.value
}
}
})
}
v-bind
attribute和property這兩種類型的綁定被放在元素定義中，如arttrs、props和domProps(value和innerhtml之類的東西)。
render(h){
returnh('div',{
attrs:{
//<div:id="myCustomId">
id:this.myCustomId
},
props:{
//<div:someProp="someonePutSomethingHere">
someProp:this.someonePutSomethingHere
},
domProps:{
//<div:value="somethingElse">
value:this.somethingElse
}
});
}
感謝各位的閱讀，以上就是“v-model結構是怎樣的”的內容了，經過本文的學習后，相信大家對v-model結構是怎樣的這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
