Vue.js 2 Complete Tutorial
#7 Class and Style Binding in Vue.js
We are going to discuss class and style binding in Vue.js. The ability to bind class and style is an important requirement to handle element’s manipulation and behavior in user interfaces. We have HTML attributes for class and style. So we can use the ‘v-bind’ directive to bind dynamic values to class and style attributes as per our needs. Let’s see it in action.
Create a data called ‘isHighlighted’. Create two paragraphs and a button. Bind click event on the button with a method called ‘toggle’. Create the toggle method and toggle the ‘isHighlighted’ value. Create a style for a class called highlight. Conditionally bind the ‘highlight’ class in first paragraph. Bind style in the second paragraph with the same condition. Run it on the browser. Yes working, the class and style are toggling.
But you can see here, this kind of conditionals is annoying and gradually the template becomes hard to maintain.
To tackle that vue provides special enhancements on ‘v-bind’ for class and style binding. In addition to string, we can use objects and arrays.
Class binding with Object Syntax:
We can use objects in the ‘v-bind’ directive to dynamically bind class. The keys in the object will be added as the element’s classes according to the truthiness of the values. Let’s see it in action.
Create a data called ‘isHighlighted’. Create a paragraph and bind the ‘highlight’ class using object syntax. Run it. Currently ‘isHighlighted’ is false. So class is not bound. Let’s update it via console and see. Yes, it’s working, the class ‘highlight’ successfully binding to the paragraph.
We can put the class object to data for maintainability.
Bind an object called ‘classObject’ to class. Create ‘classObject’ data and set highlight property to false. Run it. Let’s update the ‘highlight’ property to true. Yes working, the class ‘highlight’ is binding to the paragraph as we expected.
We can use computed properties as well to build a powerful and robust pattern when we have complex logic.
Create a property called ‘isHighlighted’. Create a computed property called ‘classObject’. Return an object with highlight property value as ‘isHighlighted’ data. Run it and check. Yes, when we change the value of ‘isHighlighted’ property it reflecting on the computed class object.
Class binding with Array Syntax:
We can use array syntax to bind a list of classes. Let’s check it.
Create a data called ‘highlightClass’ with highlight property value to false. Create another data called errorClass with error property value to false. Create a paragraph and bind highlightClass and errorClass to the class using the array syntax. Run it and check by updating highlight and error properties to true. Yes, the classes highlight and error binding to the paragraph.
We can use ternary expressions in array syntax to conditionally bind class. Let’s check how to do that.
Let’s bind the highlight and error class by default. Create a property called hasError and set its value to false. Remove the array items and conditionally bind the ‘errorClass’ and ‘highlightClass’. Run it and check by updating the value of ‘hasError’. Yes, the classes toggling according to the value of ‘hasError’ property.
Object syntax can be used inside array syntax. So we can avoid the usage of the ternary expressions in many cases.
Create an object and set the error value to hasError. Keep the highlightClass as same. Now we don’t want the errorClass. Let’s check it by updating the value of hasError. Yes working.
Class binding on components:
When we add or bind class to a component it will add to the component’s root element. Let’s see it in action.
Create a data called ‘isHighlighted’ and set its value to false. Create a component with ‘heading’ as a tag name and set a template with a division wrapper for heading and paragraph. Use heading and run it, Yes working. Bind the highlight class. Run it and check by updating the value of ‘isHighlighted’. Check the rendered component. Yes, here you can see the class is binding on the root element of the component.
Style binding with Object Syntax:
Object syntax in inline style binding almost looks like CSS. We can use property names in ‘camel-case’ or ‘kebab-case’. Let’s see how to use it.
Create a paragraph and bind the color and font style using object syntax. Run it. Yes working.
We can put the style object to data for maintainability.
Create an object called ‘highlightStyle’ with color and fontStyle properties. Bind the highlightStyle object to style. Run it. Yes working.
We can use computed property here as well for complex logic.