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

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

In vue, "v-model" is used to bind the form input to the corresponding model data, and can achieve two-way binding; it includes "v-bind" binding value attribute and "v-on" listening for the input event of the form element, and changing the data. The syntax is "vMuy model =" message ".

This article operating environment: windows10 system, Vue2.9.6 version, DELL G3 computer.

What is the use of v-model in vue

V-model can bind the form input to the corresponding model data

We implement a simple requirement through v-model

Through the form input binding model data message, the form data change data.message also changes.

Then the changed message data is displayed on the view page through the Mustache expression

V-model is actually a grammatical sugar, or abbreviation, which actually contains two operations:

V-bind binds value property

V-on listens for input events of form elements and changes data

Basic use of v-model

(1) basic use

{{message}} const app = new Vue ({el:'# app', data: {message: 'hello'}})

V-model can achieve two-way binding of data, the common way is for the page to obtain data from data, and v-model can be used to achieve two-way binding, that is, data will change when the page changes.

(2) realization principle

{{message}} const app = new Vue ({el:'# app', data: {message: 'hello'}, methods: {valueChange (event) {this.message = event.target.value;})

This is a two-way binding implemented manually

Thank you for your reading, the above is the content of "how to use v-model in vue". After the study of this article, I believe you have a deeper understanding of how to use v-model in vue, 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.