Hello folks! welcome back to a new edition of our tutorial on Vue.js. In this tutorial, we will be studying about Vue.js Binding.
We are going to discuss how to manipulate or assign values to HTML attributes, change the styles, and assign classes with the help of a binding directive called v-bind available with Vue.js.
Let's look at an example to understand why we need and when to utilize v-bind directive for data binding.
Let's look at an example to understand why we need and when to utilize v-bind directive for data binding.
Example
Following is a simple example -
<html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <div id = "databinding"> {{title}}<br/> <a href = "hreflink" target = "_blank"> Click Me </a> <br/> <a href = "{{hreflink}}" target = "_blank">Click Me </a> <br/> <a v-bind:href = "hreflink" target = "_blank">Click Me </a> <br/> </div> <script type = "text/javascript"> var vm = new Vue({ el: '#databinding', data: { title : "DATA BINDING", hreflink : "http://www.google.com" } }); </script> </body> </html>
In the above code, we have displayed a title variable and three anchor links. We have as well alloted a value to the href from the data object.
Now, if we check the output in the browser and inspect, we will notice that the first two anchor links don't have the href correctly as shown in following screenshot.
Now, if we check the output in the browser and inspect, we will notice that the first two anchor links don't have the href correctly as shown in following screenshot.
The first clickme shows the href as hreflink, and the second one displays it in {{hreflink}}, while the last one displays the correct url as we need.
Hence, to assign values to HTML attributes, we need to bind it using the directive v-bind as follows -
Hence, to assign values to HTML attributes, we need to bind it using the directive v-bind as follows -
<a v-bind:href = "hreflink" target = "_blank">Click Me </a>
Vue.js also makes available a shorthand for v-bind as follows -
<a :href = "hreflink" target = "_blank">Click Me </a>
If we see the inspect element in the browser, the anchor tag does not display the v-bind attribute, however, it shows the plain HTML. None of the Vue.js properties are seen when we inspect the DOM.
READ: Vue.js | Watch Property
Binding HTML Classes
To bind HTML class, we need to make use of v-bind: class. Let us look at an example and bind classes in it.
Example
Following is a simple example -
<html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <style> .active { background: red; } </style> <div id = "classbinding"> <div v-bind:class = "{active:isactive}"><b>{{title}}</b></div> </div> <script type = "text/javascript"> var vm = new Vue({ el: '#classbinding', data: { title : "CLASS BINDING", isactive : true } }); </script> </body> </html>
There is a div created using v-bind: class=" {active:isactive}".
Here, isactive is a variable based on true or false. It will apply the class active to the div. In the data object, we assigned the isactive variable as true. There is a class defined in the style .active with the background color as red.
If the variable isactive is true, the color will be applied otherwise not.
Here, isactive is a variable based on true or false. It will apply the class active to the div. In the data object, we assigned the isactive variable as true. There is a class defined in the style .active with the background color as red.
If the variable isactive is true, the color will be applied otherwise not.
Output
Following will be the output in the browser -
In above output, we can see the background color is red. The class ="active" is applied to the div.
Now, let us change the value of the variable to false and see the new result. The variable isactive is changed to false as shown in the following code.
Now, let us change the value of the variable to false and see the new result. The variable isactive is changed to false as shown in the following code.
<html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <style> .active { background: red; } </style> <div id = "classbinding"> <div v-bind:class = "{active:isactive}"><b>{{title}}</b></div> </div> <script type = "text/javascript"> var vm = new Vue({ el: '#classbinding', data: { title : "CLASS BINDING", isactive : false } }); </script> </body> </html>
Output
Following will be the output in the browser -
In the above output, we can see the active class is not applied to the div.
We can also assign multiple classes to the HTML tags using v-bind attributes.
We can also assign multiple classes to the HTML tags using v-bind attributes.
Example
Following is a simple example -
<html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <style> .info { color: #00529B; background-color: #BDE5F8; } div { margin: 10px 0; padding: 12px; } .active { color: #4F8A10; background-color: #DFF2BF; } .displayError{ color: #D8000C; background-color: #FFBABA; } </style> <div id = "classbinding"> <div class = "info" v-bind:class = "{ active: isActive, 'displayError': hasError }"> {{title}} </div> </div> <script type = "text/javascript"> var vm = new Vue({ el: '#classbinding', data: { title : "This is class binding example", isActive : false, hasError : false } }); </script> </body> </html>
For the div in the above code, we've applied a normal class, example class="info". Based on isActive and hasError variables, the other classes will get applied to the div.
Output
Following will be the output in the browser -
The output above is a normal class applied. Both the variables are false right now. Let's make the isActive variable true and see the output.
In the above output, in the DOM we can see two classes aligned to the div, i.e., info and active. Let's set the hasError variable to true and isActive false.
Now, when we see in the above display, info and displayError class is applied to the div. This is how we can assign multiple classes based on conditions.
We can also pass class as an array. Let us look at a short example to understand this.
We can also pass class as an array. Let us look at a short example to understand this.
Example
<html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <style> .info { color: #00529B; background-color: #BDE5F8; } div { margin: 10px 0; padding: 12px; font-size : 25px; } .active { color: #4F8A10; background-color: #DFF2BF; } .displayError{ color: #D8000C; background-color: #FFBABA; } </style> <div id = "classbinding"> <div v-bind:class = "[infoclass, errorclass]">{{title}}</div> </div> <script type = "text/javascript"> var vm = new Vue({ el: '#classbinding', data: { title : "This is class binding example", infoclass : 'info', errorclass : 'displayError' } }); </script> </body> </html>
Output
Following will be the output in the browser -
READ: Vue.js | Instances
As we can see from the above result, both classes get applied to the div. Let us make use of a variable and based on the value of the variable, assign the class.
<html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <style> .info { color: #00529B; background-color: #BDE5F8; } div { margin: 10px 0; padding: 12px; font-size : 25px; } .active { color: #4F8A10; background-color: #DFF2BF; } .displayError{ color: #D8000C; background-color: #FFBABA; } </style> <div id = "classbinding"> <div v-bind:class = "[isActive ? infoclass : '', haserror ? errorclass : '']">{{title}}</div> </div> <script type = "text/javascript"> var vm = new Vue({ el: '#classbinding', data: { title : "This is class binding example", infoclass : 'info', errorclass : 'displayError', isActive : true, haserror : false } }); </script> </body> </html>
We have utilized two variables isActive and hasError and the same is utilized for the div while class binding as seen in the following div tag.
<div v-bind:class = "[isActive ? infoclass : '', haserror ? errorclass : '']">{{title}}</div>
If isActive is true, infoclass will be assigned to it. The same goes for haserror, if it's true, then only errorClass will be applied to it.
Now let us set haserror variable as true and isActive as false.
We are now going to add v-bind for classes in the components. In the below example, we have included a class to the component template and also to the component.
Example
Following below is a simple example -
<html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <style> .info { color: #00529B; background-color: #BDE5F8; } div { margin: 10px 0; padding: 12px; font-size : 25px; } .active { color: #4F8A10; background-color: #DFF2BF; } .displayError{ color: #D8000C; background-color: #FFBABA; } </style> <div id = "classbinding"> <new_component class = "active"></new_component> </div> <script type = "text/javascript"> var vm = new Vue({ el: '#classbinding', data: { title : "This is class binding example", infoclass : 'info', errorclass : 'displayError', isActive : false, haserror : true }, components:{ 'new_component' : { template : '<div class = "info">Class Binding for component</div>' } } }); </script> </body> </html>
Output
The following is the output in the browser. It applies both classes to the final div.
<div class = ”info active”></div>
Add a variable in the component section to display, based on true/false.
<html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <style> .info { color: #00529B; background-color: #BDE5F8; } div { margin: 10px 0; padding: 12px; font-size : 25px; } .active { color: #4F8A10; background-color: #DFF2BF; } .displayError{ color: #D8000C; background-color: #FFBABA; } </style> <div id = "classbinding"> <new_component v-bind:class = "{active:isActive}"></new_component> </div> <script type = "text/javascript"> var vm = new Vue({ el: '#classbinding', data: { title : "This is class binding example", infoclass : 'info', errorclass : 'displayError', isActive : false, haserror : true }, components:{ 'new_component' : { template : '<div class = "info">Class Binding for component</div>' } } }); </script> </body> </html>
Since the variable is false, the active class is not applied and the info class is applied as shown in the following screenshot.
Binding Inline Styles
Object Syntax
Example
<html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <div id = "databinding"> <div v-bind:style = "{ color: activeColor, fontSize: fontSize + 'px' }">{{title}}</div> </div> <script type = "text/javascript"> var vm = new Vue({ el: '#databinding', data: { title : "Inline style Binding", activeColor: 'red', fontSize :'30' } }); </script> </body> </html>
Output
In the above example, for the div, the style is applied and the data is gotten from the data object.
<div v-bind:style = "{ color: activeColor, fontSize: fontSize + 'px' }">{{title}}</div> data: { title : "Inline style Binding", activeColor: 'red', fontSize :'30' }
We can also do the same thing by assigning all the values to a variable and assigning the variable to the div.
<html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <div id = "databinding"> <div v-bind:style = "styleobj">{{title}}</div> </div> <script type = "text/javascript"> var vm = new Vue({ el: '#databinding', data: { title : "Inline style Binding", styleobj : { color: 'red', fontSize :'40px' } } }); </script> </body> </html>
The color and the fontSize is allotted to the object that's called styleobj and the same is allotted to the div.
<div v-bind:style = "styleobj">{{title}}</div>
Output
READ: Vue.js | Components
Form Input Bindings
So far in the example we have made, we've seen v-model binding the input text element and the value binded to a variable assigned. Let us learn more about it in this section.
Example
<html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <div id = "databinding"> <h3>TEXTBOX</h3> <input v-model = "name" placeholder = "Enter Name" /> <h3>Name entered is : {{name}}</h3> <hr/> <h3>Textarea</h3> <textarea v-model = "textmessage" placeholder = "Add Details"></textarea> <h1><p>{{textmessage}}</p></h1> <hr/> <h3>Checkbox</h3> <input type = "checkbox" id = "checkbox" v-model = "checked"> {{checked}} </div> <script type = "text/javascript"> var vm = new Vue({ el: '#databinding', data: { name:'', textmessage:'', checked : false } }); </script> </body> </html>
Whatever we type into the textbox is shown below. v-model is assigned the value name and the name is shown in {{name}}, which displays whatever is typed in the textbox.
Output
Let us check out some more examples on how to use it.
Radio and Select
Example
<html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <div id = "databinding"> <h3>Radio</h3> <input type = "radio" id = "black" value = "Black" v-model = "picked">Black <input type = "radio" id = "white" value = "White" v-model = "picked">White <h3>Radio element clicked : {{picked}} </h3> <hr/> <h3>Select</h3> <select v-model = "languages"> <option disabled value = "">Please select one</option> <option>Java</option> <option>Javascript</option> <option>Php</option> <option>C</option> <option>C++</option> </select> <h3>Languages Selected is : {{ languages }}</h3> <hr/> </div> <script type = "text/javascript"> var vm = new Vue({ el: '#databinding', data: { picked : 'White', languages : "Java" } }); </script> </body> </html>
Output
Modifiers
We have made use of three modifiers in the example - trim, number, and lazy.
Example
<html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <div id = "databinding"> <span style = "font-size:25px;">Enter Age:</span> <input v-model.number = "age" type = "number"> <br/> <span style = "font-size:25px;">Enter Message:</span> <input v-model.lazy = "msg"> <h3>Display Message : {{msg}}</h3> <br/> <span style = "font-size:25px;">Enter Message : </span><input v-model.trim = "message"> <h3>Display Message : {{message}}</h3> </div> <script type = "text/javascript"> var vm = new Vue({ el: '#databinding', data: { age : 0, msg: '', message : '' } }); </script> </body> </html>
Output
Number Modifier
This allows to only enter numbers. It will not take any other input besides numbers.
<span style = "font-size:25px;">Enter Age:</span> <input v-model.number = "age" type = "number">
Lazy Modifier
This will display the content present in the textbox once it is fully entered and the user leaves the textbox.
<span style = "font-size:25px;">Enter Message:</span> <input v-model.lazy = "msg">
Trim Modifier
This will remove any spaces entered at the start and at the end.
<span style = "font-size:25px;">Enter Message : </span><input v-model.trim = "message">
READ: Vue.js | Template
Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial, we will be discussing about Vue.js Events.
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.
