这篇文章主要讲解了“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进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
