Vue.js Data Binding
Vue.js supports different types of data binding. Before going to learn data binding in Vue.js, let’s see what data binding is and how it is used.
What is Data binding?
Data binding is a technique used to bind data sources from the provider and consumer together and synchronize them at the time of retrieval. In a data binding process, whenever data is changed, it is reflected automatically by the elements bound to the data.
The term data binding is also used in cases where an outer representation of data in an element changes, and the underlying data is automatically updated to reflect this change.
Vue.js Class and Style Binding
In Vue.js data binding, we have to manipulate the class list and inline styles of an element. We already know that the class list and inline style are attributes so we can use v-bind to handle them. Vue.js provides special enhancements when we use v-bind with class and style. The expressions can also evaluate to objects or arrays along with strings.
Here, we will learn how to manipulate or assign values to HTML attributes, change the style, and assign classes with the help of Vue.js binding directive v-bind. Let’s see a simple example to understand why and when to use v-bind directive for data binding.
Index.html file:
Index.js file:
Let’s use a simple CSS file to make the output more attractive.
Index.css file:
After the execution of the program, you will see the following output:
Output:
Example Explanation
In the above example, you can see a title variable and three anchor links as following:
We have also assigned a value hreflink : “https://tutoraspire.com” to the href from the data object.
- If you click on the first Click Here link, it shows the href as hreflink so it will not redirect to the targeted url.
- If you click on the second Click Here link, it shows the href as {{hreflink}}, so it will also not redirect to the targeted url.
- Only the third one will redirect the correct targeted url because we have to bind it with the v-bind directive. See the following result.
So, to assign values to HTML attributes, we have to bind it with the v-bind directive as follows:
You can also use a shorthand to include v-bind directive as follows:
Note: If you inspect element of the result, you will see that the anchor tag does not show the v-bind attribute. It displays a plain HTML. The Vue.js properties are seen when we inspect the DOM.
Vue.js HTML Classes Binding
In Vue.js, we can bind an HTML class by using the v-bind: class directive. Let’s see an example to demonstrate the binding of HTML classes in Vue.js.
Index.html file:
Index.js file:
After the execution of the program, you will see the following output:
Output:
In the above example, we have created a div with v-bind: class=” {active: isactive}”. Here, isactive is a variable based on true or false values. This isactive variable is used to apply class active to the div. When we assign isactive variable as true, it shows the specified style in result as we have defined in the style .active with the background color as skyblue.
If you set the variable isactive is false, it will not apply the specified style in the result.
Index.js file:
After the execution of the program, you will see the following output:
Output:
Assign multiple classes to HTML tags
You can also assign multiple classes to HTML tags using v-bind attribute. See the following example:
Index.html file:
Index.js file:
After the execution of the program, you will see the following output:
Output:
In the above example, you can see that only the normal class is applied. Both other variables are false right now. Now, let’ see what will happen when we set isActive variable to true:
Output:
In the above example, we have assigned two classes to the div, info and active. Now, let’s make hasError variable true and isActive false and then see the result.
Output:
Now, in the above example, info and displayError class is applied to the div. This is how you can apply multiple classes according to the conditions.
Assign multiple classes using an array
We can also pass class as an array. See the following example to understand this well:
Syntax:
Example:
Index.html file:
Index.js file:
After the execution of the program, you will see the following output:
Output:
In the above example, both classes are applied to the div.
Vue.js Inline Style Binding
Object Syntax
The object syntax for v-bind:style is just like CSS, but it’s a JavaScript object. You can use either camelCase or kebab-case (use quotes with kebab-case) for the CSS property names:
HTML:
CSS:
You can also bind a style object directly to make the template cleaner.
HTML:
CSS:
Let’s take an example to understand the concept clearly.
Index.html file:
Index.js file:
After the execution of the program, you will see the following output:
Output:
In the above example, you can see that the style is applied for the div, and the data is fetched from the data object.
You can fetch the same result by assigning all the values to a variable and then assigning the variable to the div.
Example:
Index.html file:
Index.js file:
Output:
In the above example, you can see that the color and the fontSize is assigned to the object called styleobj and the same is assigned to the div.