Vue.js Two Way Binding Model Last Updated : 07 Jun, 2022 Comments Improve Suggest changes Like Article Like Report Vue.js is a progressive framework for building user interfaces. The core library is focused on the view layer only and is easy to pick up and integrate with other libraries. Vue is also perfectly capable of powering sophisticated Single-Page Applications in combination with modern tooling and supporting libraries. The v-model directive makes two-way binding between a form input and app state very easy to implement. One can bind a form input element and make it change the Vue data property when the content of the field changes. These concepts can be used in such cases where according to a field value we also want to update some other field values. After recent updates v-model can be used on the child components also, helping developers to make reusable inputs with completely different behaviors. The below examples demonstrate this concept. Example 1: Filename- index.html: HTML <html> <head> <script src= "https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"> </script> </head> <body> <div id='parent'> <h1 style="color: green;"> GeeksforGeeks </h1> <h3>Two Way Data Binding</h3> <p><Strong>{{text}}</Strong></p> <input v-model="text"> </div> <script src='app.js'></script> </body> </html> Filename- app.js: JavaScript const parent = new Vue({ el : '#parent', data : { text : "Hi" } }) Output: Example 2: Filename- index.html: HTML <html> <head> <script src= "https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"> </script> </head> <body> <div id='parent'> <h1 style="color: green;"> GeeksforGeeks </h1> <strong>Sex : </strong> <input type="radio" id="m" value="male" v-model="sex"> <label for="male">Male</label> <input type="radio" id="f" value="female" v-model="sex"> <label for="female">Female</label> <input type="radio" id="b" value="bi-sexual" v-model="sex"> <label for="bi-sexual">Bisexual</label> <p><strong>Your Sex: </strong>{{ sex }}</p> </div> <script src='app.js'></script> </body> </html> Filename- app.js: JavaScript const parent = new Vue({ el : '#parent', data : { address:'' } }) Output: Comment More infoAdvertise with us Next Article Vue.js Reusing Components H hunter__js Follow Improve Article Tags : JavaScript Web Technologies Vue.JS Similar Reads Vue.js Tutorial Vue.js is a progressive JavaScript framework for building user interfaces. It stands out for its simplicity, seamless integration with other libraries, and reactive data binding.Built on JavaScript for flexible and component-based development.Supports declarative rendering, reactivity, and two-way d 4 min read BasicsVue.js Introduction & InstallationVue JS is a JavaScript framework used to design and build user interfaces. It is one of the best frameworks for Single Page Web Applications. It is compatible with other libraries and extensions as well. In the development field, there may be so many issues that can not be solved by using a single l 2 min read Vue.js InstancesA Vue.js application starts with a Vue instance. The instances object is the main object for our Vue App. It helps us to use Vue components in our application. A Vue instance uses the MVVM(Model-View-View-Model) pattern. The Vue constructor accepts a single JavaScript object called an options object 2 min read Vue.js WatchersA Watcher in Vue.js is a special feature that allows one to watch a component and perform specified actions when the value of the component changes. It is a more generic way to observe and react to data changes in the Vue instance. Watchers are the most useful when used to perform asynchronous opera 3 min read Vue.js MethodsA Vue method is an object associated with the Vue instance. Functions are defined inside the methods object. Methods are useful when you need to perform some action with v-on directive on an element to handle events. Functions defined inside the methods object can be further called for performing ac 2 min read Vue.js Event ModifiersVue.js is a progressive javascript framework for developing web user interfaces. It is a performant, approachable, and versatile framework. We can create Single Page Applications as well as Full Stack applications. It is built on top of HTML, CSS, and Javascript which makes it easier for developers 3 min read Vue.js DOM treeVue.js is a javascript framework that is used in building static as well as dynamic webpages and User Interfaces. It offers many lucrative features for developers to use. For example, virtual DOM, component architecture, directives, templates, event binding, and many more. Document Object Model (DOM 4 min read How to write and use for loop in Vue js ?Vue.js is one of the best frameworks for JavaScript like ReactJS. The VueJS is used to design the user interface layer, it is easy to pick up for any developer. It is compatible with other libraries and extensions as well. If you want to create a single-page application then VueJS is the first choic 4 min read Vue.js Two Way Binding ModelVue.js is a progressive framework for building user interfaces. The core library is focused on the view layer only and is easy to pick up and integrate with other libraries. Vue is also perfectly capable of powering sophisticated Single-Page Applications in combination with modern tooling and suppor 2 min read Vue.js Reusing ComponentsVue.js is a progressive javascript framework for developing web user interfaces. It is a performant, approachable, and versatile framework. We can create Single Page Applications as well as Full Stack applications. It is built on top of HTML, CSS, and Javascript which makes it easier for developers 4 min read Vue.js List RenderingVue.js is a progressive framework for building user interfaces. The core library is focused on the view layer only and is easy to pick up and integrate with other libraries. Vue is also perfectly capable of powering sophisticated Single-Page Applications in combination with modern tooling and suppor 4 min read Vue.js List Rendering Mutation MethodsVue.js is a progressive framework for building user interfaces. The core library is focused on the view layer only and is easy to pick up and integrate with other libraries. Vue is also perfectly capable of powering sophisticated Single-Page Applications in combination with modern tooling and suppor 3 min read Vue.js v-cloak DirectiveThe v-cloak directive is a Vue.js directive that will remain on the element until the associated Vue instance finishes compilation. Combined with CSS rules such as [v-cloak] { display: none }, this directive can be used to hide uncompiled mustache bindings until the Vue instance is ready. First, we 1 min read Vue.js Passing Data to Child Components with PropsVue.js is a progressive javascript framework for developing web user interfaces. It is a performant, approachable, and versatile framework. We can create Single Page Applications as well as Full Stack applications. It is built on top of HTML, CSS, and Javascript which makes it easier for developers 3 min read Vue.js Form Input Binding with Select optionVue.js is a progressive javascript framework for developing web user interfaces. It is a performant, approachable, and versatile framework. We can create Single Page Applications as well as Full Stack applications. It is built on top of HTML, CSS, and Javascript which makes it easier for developers 3 min read Vue.js Dynamic ComponentsVue.js is a progressive javascript framework for developing web user interfaces. It is a performant, approachable, and versatile framework. We can create Single Page Applications as well as Full Stack applications. It is built on top of HTML, CSS, and Javascript which makes it easier for developers 3 min read Vue.js Form Input Value BindingVue.js is a progressive javascript framework for developing web user interfaces. It is a performant, approachable, and versatile framework. We can create Single Page Applications as well as Full Stack applications. It is built on top of HTML, CSS, and Javascript which makes it easier for developers 5 min read Vue.js Form Input Binding number ModifierVue.js is a progressive javascript framework for developing web user interfaces. It is a performant, approachable, and versatile framework. We can create Single Page Applications as well as Full Stack applications. It is built on top of HTML, CSS, and Javascript which makes it easier for developers 2 min read Vue.js List Rendering v-for with v-ifVue.js is one of the best frameworks for JavaScript like React JS. The Vue JS is used to design the user interface layer, it is easy to pick up for any developer. It is compatible with other libraries and extensions as well. In order to repeat a task for a fixed amount of time, we make use of the f 3 min read Vue.js List Rendering v-for with a RangeVue.js is one of the best frameworks for JavaScript like React JS. The Vue JS is used to design the user interface layer, it is easy to pick up for any developer. It is compatible with other libraries and extensions as well. The Vue JS is supported by all popular browsers like Chrome, Firefox, IE, S 3 min read Vue.js Form Input Binding with Checkbox optionVue.js is a progressive javascript framework for developing web user interfaces. It is a versatile framework providing high speed and performance. We can create Single Page Applications as well as Full Stack applications.Input Binding is used to sync and maintain the state of form input elements wit 2 min read Vue.js Form Input Binding with Multiline textVue.js is a progressive javascript framework for developing web user interfaces. It is a versatile framework providing high speed and performance.  We can create Single Page Applications as well as Full Stack applications.Input Binding is used to sync and maintain the state of form input elements wi 2 min read Vue.js Form Input Binding trim ModifierVue.js is a progressive javascript framework for developing web user interfaces. It is a versatile framework providing high speed and performance.  We can create Single Page Applications as well as Full Stack applications.Input Binding is used to sync and maintain the state of form input elements wi 2 min read Vue.js Form Input Binding with Radio OptionVue.js is a progressive javascript framework for developing web user interfaces. It is a versatile framework providing high speed and performance. We can create Single Page Applications as well as Full Stack applications.Input Binding is used to sync and maintain the state of form input elements wit 3 min read Vue.js List Rendering v-for with an ObjectVue.js is a progressive framework for building user interfaces. The core library is focused on the view layer only and is easy to pick up and integrate with other libraries. Vue is also perfectly capable of powering sophisticated Single-Page Applications in combination with modern tooling and suppor 3 min read Vue.js Render Function with h() ArgumentsVue.js is a progressive javascript framework for developing web user interfaces. It is a performant, approachable, and versatile framework. We can create Single Page Applications as well as Full Stack applications. It is built on top of HTML, CSS, and Javascript which makes it easier for developers 3 min read Vue.js Composition API with TemplatesVue.js is a progressive javascript framework for developing web user interfaces. It is a versatile framework providing high speed and performance. We can create Single Page Applications as well as Full Stack applications. The Composition API allows author to Vue components using imported functions r 3 min read Vue.js Event HandlingVue.js is an open-source Model–View–ViewModel front-end JavaScript framework for building user interfaces and single-page applications. Vue.js has many own directives for DOM manipulation such as v-bind, v-on, v-model, etc. In this article, we will see how to handle the events and their Implementati 11 min read Vue.js Declarative RenderingVue.js is a progressive framework for building user interfaces. The core library is focused on the view layer only and is easy to pick up and integrate with other libraries. Vue is also perfectly capable of powering sophisticated Single-Page Applications in combination with modern tooling and suppor 2 min read Create a Hover effect in Vue.jsVue is a progressive framework for building user interfaces. The core library is focused on the view layer only and is easy to pick up and integrate with other libraries. Vue is also perfectly capable of powering sophisticated Single-Page Applications in combination with modern tooling and supportin 1 min read Types of data binding with template in Vue.jsIn this article, we will see different ways to bind data with the template in Vue.js, along with understanding their implementation through the examples. When we wish to utilize our variables or data within the template, we generally use the mustache syntax(double curly braces). However, this isn't 8 min read Vue.js Click EventVue.js is a progressive framework for building user interfaces. The core library is focused on the view layer only and is easy to pick up and integrate with other libraries. Vue is also perfectly capable of powering sophisticated Single-Page Applications in combination with modern tooling and suppor 2 min read Pass data between components using Vue.js Event BusComponent communication in Vue.js can become complicated and messy at times using $emit and props. In real-world applications where the Component tree is nested and big, it is not convenient to pass data using this method as it will only increase the complexity of the application and make debugging 3 min read Vue.js Render Functions Component VNodes creationVue.js is a progressive javascript framework for developing web user interfaces. It is a performant, approachable, and versatile framework. We can create Single Page Applications as well as Full Stack applications. It is built on top of HTML, CSS, and Javascript which makes it easier for developers 2 min read Vue.js List Entering & Leaving TransitionsVue.js is a progressive javascript framework for developing web user interfaces. It is a versatile framework providing high speed and performance.  We can create Single Page Applications as well as Full Stack applications.The Entering and Leaving Transitions are used to perform the animation on list 3 min read Vue.js Composition API using ProvideVue.js is a progressive javascript framework for developing web user interfaces. It is a performant, approachable, and versatile framework. We can create Single Page Applications as well as Full Stack applications. It is built on top of HTML, CSS, and Javascript, making it easier for developers to i 3 min read Vue.js List Move TransitionsVue.js is a progressive JavaScript framework for developing web user interfaces. It is a versatile framework providing high speed and performance. We can create Single Page Applications as well as Full Stack applications.The Vue.js List Move Transitions smooths the transition when an element is adde 3 min read Vue.js Transitioning between the ComponentsVue.js is a progressive javascript framework for developing web user interfaces. It is a performant, approachable, and versatile framework. We can create Single Page Applications as well as Full Stack applications. It is built on top of HTML, CSS, and Javascript which makes it easier for developers 3 min read REST API Call to Get Location Details in Vue.jsIn this article, we will know the REST API call to get the location details in VueJS, along with understanding its implementation through the examples.VueJS is one of the best frameworks for JavaScript like ReactJS. The VueJS is used to design the user interface layer, it is easy to pick up for any 7 min read TransitionVue.js v-on:keyup DirectiveThe v-on:keyup directive is a Vue.js directive used to add an event listener to an button in the keyboard. First, we will create a div element with id as app and let's apply the v-on:keyup directive to the input element. Further, we can execute a function when we press the associated key. Syntax: v- 2 min read v-bind Directive in Vue.jsThe v-bind directive is a Vuejs directive used to bind one or more attributes, or a component prop to an element. If that attribute is bound to our data defined in Vuejs instance then dynamic changes can be observed as data changes. First, we will create a div element with id as app, and let's apply 2 min read v-for Directive in Vue.jsv-for directive is a Vue.js directive used to loop over a data usually an array or object. First, we will create a div element with id as app and let's apply the v-for directive to an element with data. Now we will create this data by initializing a Vue instance with the data attribute containing th 1 min read DirectivesVue.js Conditional RenderingVue.js is a progressive framework for building user interfaces. The core library is focused on the view layer only and is easy to pick up and integrate with other libraries. Vue is also perfectly capable of powering sophisticated Single-Page Applications in combination with modern tooling and suppor 2 min read Vue.js List Rendering v-for with a ComponentVue.js is one of the best frameworks for JavaScript like ReactJS. The VueJS is used to design the user interface layer, it is easy to pick up for any developer. In order to repeat a task for a fixed amount of time, we make use of the for loop. The Components are used to build the combination of UI 3 min read Vue.js List Rendering v-for on a <template>Vue.js is one of the best frameworks for JavaScript like React JS. The Vue JS is used to design the user interface layer, it is easy to pick up for any developer. It is compatible with other libraries and extensions as well. In order to repeat a task for a fixed amount of time, we make use of the fo 3 min read Vue.js | v-if directiveThe v-if directive is a Vue.js directive used to toggle the display CSS property of a element with a condition. If the condition is true it will make it visible else it will make it invisible. First, we will create a div element with id as app and let's apply the v-if directive to this element with 2 min read Vue.js | v-text directiveThe v-text directive is a Vue.js directive used to update a element’s textContent with our data. It is just a nice alternative to Mustache syntax. First, we will create a div element with id as app and let's apply the v-text directive to this element with data as a message. Now we will create this m 1 min read Vue.js | v-show directiveThe v-show directive is a Vue.js directive used to toggle the display CSS property of a element with our data via inline styles. If the data is true it will make it visible else it will make it invisible. First, we will create a div element with id as app and let's apply the v-show directive to this 2 min read Vue.js | v-html directiveThe v-html directive is a Vue.js directive used to update a element’s inner HTML with our data. This is what separates it from v-text which means while v-text accepts string and treats it as a string it will accept string and render it into HTML. First, we will create a div element with id as app an 2 min read Vue.js v-on:click directiveThe v-on:click directive is a Vue.js directive used to add a click event listener to an element. First, we will create a div element with id as app and let's apply the v-on:click directive to a element. Further, we can execute a function when click even occurs.Syntax:v-on:click="function"Parameters: 1 min read Vue.js v-once DirectiveThe v-once directive is a Vue.js directive that is used to avoid unwanted re-renders of an element. It treats the element as a static content after rendering it once for the first time. This improves performance as it does not have to be rendered again. First, we will create a div element with the i 1 min read Vue.js v-on:click.ctrl DirectiveThe v-on:click.ctrl directive is a Vue.js directive used to add a click event listener to an element. While click directive triggers the event for all kinds of clicks, this directive only triggers the event when the ctrl key is pressed along with the click. First, we will create a div element with i 2 min read Vue.js v-on:click.right DirectiveThe v-on:click.right directive is a Vue.js directive used to add a click event listener to an element. While click directive triggers the event for all kind of clicks, this directive only triggers the event when right key of mouse is clicked. First, we will create a div element with id as app and le 1 min read Vue.js v-on:click.shift DirectiveThe v-on:click.shift directive is a Vue.js directive used to add a click event listener to an element. While click directive triggers the event for all kind of clicks, this directive only triggers the event when shift key is pressed along with the click. First, we will create a div element with id a 1 min read Vue.js v-on:click.left DirectiveThe v-on:click.left directive is a Vue.js directive used to add a click event listener to an element. While click directive triggers the event for all kind of clicks, this directive only triggers the event when left key of mouse is clicked. First, we will create a div element with id as app and let' 1 min read Vue.js v-on:click.alt DirectiveThe v-on:click.alt directive is a Vue.js directive used to add a click event listener to an element. While click directive triggers the event for all kind of clicks, this directive only triggers the event when alt key is pressed along with the click. First, we will create a div element with id as ap 1 min read How a View-model works in Vue.js?Vue.js is a front-end progressive javascript framework for building User Interfaces ( UI ) and Single Page Applications. This framework focuses on Model – View – ViewModel architecture pattern that connects the View ( User Interface ) and the Model ( Data Objects ). Vue.js uses many built-in directi 4 min read v-on:click.middle Directive in Vue.jsv-on:click.middle directive is a Vue.js directive used to add a click event listener to an element. While click directive triggers the event for all kind of clicks, this directive only triggers the event when middle key of mouse is clicked. First, we will create a div element with id as app and let' 1 min read Vue.js v-pre DirectiveThe v-pre directive is a Vue.js directive used to skip compilation for this element and all its children. You can use this for displaying raw mustache tags. First, we will create a div element with id as app and let's apply the v-pre directive to an element. Further, we can use a heading element to 1 min read Vue.js Form Input Binding lazy ModifierVue.js is a progressive javascript framework for developing web user interfaces. It is a performant, approachable, and versatile framework. We can create Single Page Applications as well as Full Stack applications. It is built on top of HTML, CSS, and Javascript which makes it easier for developers 3 min read Data Conversion to KB, MB, GB, TB using Vue.js filtersIn this article, we are going to learn how to convert data to the given unit of data using filters in VueJS. Filters are a functionality provided by Vue components that let you apply formatting and transformations to any part of your template dynamic data. The filter property of the component is an 2 min read Convert decimal point numbers to percentage using filters in Vue.jsVue is a progressive framework for building user interfaces. The core library is focused on the view layer only and is easy to pick up and integrate with other libraries. Vue is also perfectly capable of powering sophisticated Single-Page Applications in combination with modern tooling and supportin 2 min read Capitalizing a string using filters in VueJSVue.js is a progressive framework for building user interfaces. The core library is focused on the view layer only and is easy to pick up and integrate with other libraries. Vue is also perfectly capable of powering sophisticated Single-Page Applications in combination with modern tooling and suppor 2 min read Vue.js Placeholder using filtersVue.JS filters are a functionality provided by Vue components that let you apply formatting and transformations to any part of your template dynamic data. The filter property of the component is an object. A single filter is a function that accepts a value and returns another value. The returned val 3 min read Truncate a String using filter in Vue.jsIn this article, we are going to learn how to truncate strings using filters in VueJS. Filters are a functionality provided by Vue components that let you apply formatting and transformations to any part of your template dynamic data. The filter property of the component is an object. A single filte 2 min read FiltersVue.js | RoutingRouting is one of the many features provided by Vue.js to allow users to switch between pages without refreshing every time a page is loaded. This results in smooth transitions between pages giving a better feel for the user.Setting Up The Application: Firstly, we need to create a project to work on 3 min read How to use routing in Vue.js ?Vue router: Vue Router helps link between the browser's URL/History and Vue's components allowing for certain paths to render whatever view is associated with it. A vue router is used in building single-page applications (SPA). The vue-router can be set up by default while creating your new project. 3 min read Vue.js VuexVuex is a state management library for Vue applications. It serves as a single source of truth in the whole application and centralizes the flow of data to various components. As we know passing props can be tedious for complex applications with many components, Vuex makes this interaction very seam 3 min read Consuming a Rest API with Axios in Vue.jsMany times when building an application for the web that you may want to consume and display data from an API in VueJS using JavaScript fetch API, Vue resource, jquery ajax API, but a very popular and most recommended approach is to use Axios, a promise-based HTTP client. Axios is a great HTTP clien 2 min read RoutingWhat is the difference between ShadowDOM and VirtualDOM ?ShadowDOM is the concept that refers to the encapsulation of DOM elements and components while VIrtualDOM is virtual representation of DOM that optimizes the Updates to the RealDOM. The Document Object Model (DOM) is a popular concept followed in client-side development. It’s a fundamental technique 3 min read What is the difference between created and mounted event in VueJS?VueJS is a model- view-view-model JavaScript framework for building user interfaces and single-page applications. It has several lifecycle hooks (not more than 8). In this article, we are going to differentiate two types of events that are part of the lifecycle of a component. CreatedMounted And amo 2 min read What is the difference between one-way data flow and two-way data binding in vue.js? Vue.js is an open-source front-end JavaScript framework for building user interfaces and single-page applications. It follows Model-View-ViewModel (MVVM) architecture pattern. Vue.js has many in-built directives for DOM manipulation such as v-bind, v-on, v-model, etc. In this article, we will learn 7 min read Difference Between Like