Home Examples Charts Dashboard Projects Menu

Vue.js examples
Learn Vue.js

vuejs model

Vue: Step-By-Step Guide To Mastering Vue.js From Beginner To Advanced (Vue.js, Learning Vue js 2)

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">

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 →


© vuejsexamples.net - Privacy Policy - Cookie Policy