Shulou(Shulou.com)06/02 Report--

This article mainly explains "what is the structure of v-model". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn how the structure of v-model is.

We know that v-model is just a syntactic sugar for the bind property and value, and sets the data property when the input event is triggered. However, there is no such abbreviation for the render function, and we need to implement it ourselves.

V-model structure

Suppose, in vue, we have the following structure:

V-mode code

The above code is equivalent to:

The above code can be implemented in the render function in the following ways:

Render (h) {

Returnh ('input', {

DomProps: {

Value:this.myBoundProperty

}

On: {

Input:e= > {

This.myBoundProperty=e.target.value

}

}

})

}

V-bind

Two types of bindings, attribute and property, are placed in element definitions, such as arttrs, props, and domProps (things like value and innerhtml).

Render (h) {

Returnh ('div', {

Attrs: {

/ /

Id:this.myCustomId

}

Props: {

/ /

SomeProp:this.someonePutSomethingHere

}

DomProps: {

/ /

Value:this.somethingElse

}

})

}

Thank you for your reading, the above is the content of "what is the structure of v-model". After the study of this article, I believe you have a deeper understanding of how the structure of v-model is, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.