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.

In Vue.js, two-way data binding can be achieved using the v-model directive.

Here’s how you can create two-way bindings in Vue.js:

html

<input v-model="myVariable">

In this example, myVariable is a data property in your Vue instance. This creates a two-way binding between the input field and the myVariable property. Changes made in the input field will automatically update the myVariable property, and changes to the myVariable property will reflect in the input field.

Alternatively, you can also use the .sync modifier to create two-way bindings on custom components. Here’s an example:

html

<custom-component :myProp.sync="myVariable"></custom-component>

And in the custom-component, you would emit an event named update:myProp to update the parent’s data:

javascript

this.$emit('update:myProp', newValue);

This approach is useful when you’re dealing with custom components and want to establish two-way bindings.