Vue Class and Style Bindings
- Tram Ho
A common need for data binding is to manipulate an element’s classlist and its inline types. Since both are properties we can use v-bind to handle them: we just need to compute a final string with our expressions. However, interfering with string concatenation is very annoying and error prone. For this reason, Vue provides special enhancements when v-bind is used with classes and styles. In addition to strings, expressions can also evaluate to objects or arrays.
Binding HTML Classes
During development you want to add a class to an HTML tag with a certain condition occurring. Then Vue can help you do this very easily.
Object syntax
You can pass an object to v-bind:class to dynamically use classes:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <template> <div> <h3>Class Style Binding</h3> <div class="default" v-bind:class="{ active: isActive }">This is text</div> </div> </template> <script> export default { name: "class-style", data() { return { isActive: true, }; }, }; </script> <style scoped> .active { color: red; } </style> |
get it
1 2 3 | <div class="default active">This is text</div> |
In the above example we can see class active
added, because we use v-bind:class declare variable isActive default value is true provided the default is true { active: isActive }
or we can also use { active: isActive == true }
. In the HTML part, we have the above text that will be displayed in red because of the active class.
When you need to bind many classes, please do the following:
1 2 3 4 5 | <div class="static" v-bind:class="{ active: isActive, 'text-bold': hasBold }" ></div> |
Data:
1 2 3 4 5 | data: { isActive: true, hasBold: true } |
get it
1 2 | <div class="default active text-bold">This is text</div> |
We can pass an object to the :class like this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <template> <div> <div class="default" :class="classObject"> This is text </div> </div> </template> <script> export default { data() { return { classObject: { active: true, 'text-bold': true, center: true } }; } }; </script> <style scoped></style> |
Result
1 2 | <div class="default active text-bold center">This is text</div> |
Classes are bound when true
Array syntax
We can pass an array to v-bind:class to apply a list of classes:
1 2 | <div v-bind:class="[activeClass, errorClass]"></div> |
data
1 2 3 4 5 | data: { activeClass: 'active', errorClass: 'text-danger' } |
Results
1 2 | <div class="active text-danger"></div> |
- You can conditionally convert a class in a list, you can do it with a ternary expression:
1 2 | <div v-bind:class="[isActive ? activeClass : '', errorClass]"></div> |
- You can also use
1 2 | <div v-bind:class="[{ active: isActive }, errorClass]"></div> |
data
1 2 3 4 5 6 | data: { isActive:true, activeClass: 'active', errorClass: 'text-danger' } |
Results
1 2 | <div class="active text-danger"></div> |
Binding Inline Styles
Object syntax
html
1 2 | <span class="token tag"><span class="token punctuation"><</span>div <span class="token attr-name"><span class="token namespace">v-bind:</span>style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{ color: activeColor, fontSize: fontSize + <span class="token punctuation">'</span>px<span class="token punctuation">'</span> }<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>This is text<span class="token tag"><span class="token punctuation"></</span>div<span class="token punctuation">></span></span> |
Js
1 2 3 4 5 | data<span class="token operator">:</span> <span class="token punctuation">{</span> activeColor<span class="token operator">:</span> <span class="token string">'red'</span><span class="token punctuation">,</span> fontSize<span class="token operator">:</span> <span class="token number">30</span> <span class="token punctuation">}</span> |
We use with 1 object to be more neat
1 2 | <span class="token tag"><span class="token punctuation"><</span>div <span class="token attr-name"><span class="token namespace">v-bind:</span>style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>styleObject<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token punctuation"></</span>div<span class="token punctuation">></span></span> |
JS
1 2 3 4 5 6 7 | data<span class="token operator">:</span> <span class="token punctuation">{</span> styleObject<span class="token operator">:</span> <span class="token punctuation">{</span> color<span class="token operator">:</span> <span class="token string">"red"</span><span class="token punctuation">,</span> fontSize<span class="token operator">:</span> <span class="token string">"30px"</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
The results are the same
1 2 | <span class="token tag"><span class="token punctuation"><</span>div <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 30px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>This is text<span class="token tag"><span class="token punctuation"></</span>div<span class="token punctuation">></span></span> |
Array syntax
You can use the array method for v-bind:style which allows you to apply multiple style objects to the same element: html
1 2 | <span class="token tag"><span class="token punctuation"><</span>div <span class="token attr-name"><span class="token namespace">v-bind:</span>style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>[colorRed, bgBlack]<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>This is text<span class="token tag"><span class="token punctuation"></</span>div<span class="token punctuation">></span></span> |
Js
1 2 3 4 5 6 7 8 9 | data<span class="token operator">:</span><span class="token punctuation">{</span> colorRed<span class="token operator">:</span><span class="token punctuation">{</span> color<span class="token operator">:</span><span class="token string">'red'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> bgBlack<span class="token operator">:</span><span class="token punctuation">{</span> background<span class="token operator">:</span><span class="token string">'black'</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
This article is quite simple so you can bind HTML tags when rendering depending on certain conditions. Hope you can understand and then bind yourself in different ways for different purposes.