Home Examples Charts Dashboard Projects Menu

Vue.js examples
Learn Vue.js

vuejs model

Related course:
Fullstack Vue: The Complete Guide to Vue.js

If you have form input, you can bind it to the app state easy with the directive v-model.

This is a two-way binding: if you change the variable in the template, it will change in the Vue app. If you display that same variable, you can see the change.

v-model example

Open app.js. In your Vue instance, create a new String variable message.

new Vue({
el: '#app',
data: {
message: 'vuejs model'
}
});

Then inside your template bind it to an input field with v-model:

<div id="app">
{{ message }}
<input v-model="message">
div>

You now linked variable message directly to the input field. The moment you change the input field, the value of message will change along.

This is real-time, see the recording below:

vuejs model

Download Vue.js Examples


← Vuejs if vuejs methods →

Posts


© vuejsexamples.net - Privacy Policy - Cookie Policy