What is the usage of v-model in vue

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

The operating environment of this article: Windows 10 system, Vue version 2.9.6, DELL G3 computer.

What is the usage of v-model in vue

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

We use v-model to implement a simple Requirements

Bind the model data message through the form input, and the data.message will also change when the form data changes

Then use the Mustache expression to display the changed message data on the view page

v-model is actually a syntax sugar, which is an abbreviation. It actually contains two operations:

• v-bind binding value attribute

• v-on listens to the input event of the form element and changes the data

Basic usage of v-model

(1)Basic usage

<div id="app">
  <input type="text" v-model="message">
  {{message}}
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: &#39;#app&#39;,
    data: {
      message: &#39;hello&#39;
    }
  })
</script>

v-model can achieve two-way binding of data. The common way is that the page obtains data from data. Using v-model can achieve two-way binding, that is, when the page changes, the data will also change

(2) Implementation principle

<div id="app">
  <input type="text" :value="message" @input="message = $event.target.value">
  <h2>{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: &#39;#app&#39;,
    data: {
      message: &#39;hello&#39;
    },
    methods: {
      valueChange(event) {
        this.message = event.target.value;
      }
    }
  })
</script>

This is a manually implemented two-way binding

[Related recommendations: "vue.js Tutorial"]

The above is the detailed content of What is the usage of v-model in vue. For more information, please follow other related articles on the PHP Chinese website!