How can you create Two-Way Bindings in Vue.js?

The v-model directive is used to create Two-Way Bindings in Vue js. In Two-Way Bindings, data or model binds with DOM, and Dom binds back to the model.

Let’s see an example to demonstrate how Two-Way Bindings is implemented.

  1. <div id=”app”>  
  2.   {{message}}  
  3.   <input v-model=”message”>  
  4. </div>  
  5. <script type=”text/javascript”>  
  6.   var message = ‘Vue.js is rad’;  
  7.   new Vue({ el: ‘#app’, data: { message } });  
  8. </script>