v-model結(jié)構(gòu)是怎樣的

這篇文章主要講解了“v-model結(jié)構(gòu)是怎樣的”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“v-model結(jié)構(gòu)是怎樣的”吧！

　　我們知道，v-model只是bind屬性與value的語法糖，并在觸發(fā)input事件時(shí)設(shè)置數(shù)據(jù)屬性。但是，在render函數(shù)沒有這樣的簡寫，我們需要自己實(shí)現(xiàn)。

　　v-model結(jié)構(gòu)

　　假設(shè)，在vue中，我們有如下的結(jié)構(gòu)：

　　<template>

　　<inputv-model='myBoundProperty'/>

　　</template>

　　v-mode代碼

　　上面代碼等價(jià)于：

　　<template>

　　<input:value="myBoundProperty"@input="myBoundProperty=$event.target.value"/>

　　</template>

　　在render函數(shù)中可以用下面方式來實(shí)現(xiàn)上面的代碼：

　　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結(jié)構(gòu)是怎樣的”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)v-model結(jié)構(gòu)是怎樣的這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！