v-model结构是怎样的

这篇文章主要讲解了“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结构是怎样的这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！