3-5 Form controls and bi-directional binding

Bi-directional binding with v-model

HTML provides several form controls for text input and selection. You can make a bi-directional binding of a data property to the value of a form control using v-model directive. As a simple example, look at the following code. When a user inputs or changes text in the input control, the data property is updated immediately. Similar, when the data property name changes, the input control also refreshes with the update.

<div id="app">
  <div>Name:</div>
  <input v-model="name" />
  Hello {{ name }}!
</div>

<script>
const opts = {
  data() {
    return { name: '' }
  }
};
Vue.createApp(opts).mount('#app');
</script>

Please refer to the example p308.html for making bi-directional binding on various HTML form controls using v-model. If you employ a UI library with input control, the attributes used to configure the controls may be different. Please refer to their documentation, e.g. as in Element-Plus.

The example p309.html combines what’ve been covered so far.