Vue CSS Binding
Find out more about modifying CSS using the style and class attributes using v-bind.
Although the idea of using v-bind to modify the style and class attributes is quite simple, the syntax may take some getting accustomed to.
Dynamic CSS in Vue
You have already seen how to utilize v-bind on the style and class properties in Vue to change CSS. This tutorial’s section on v-bind provides a brief explanation, along with multiple examples of Vue modifying CSS.
We will go into further detail about how to use Vue to alter CSS dynamically in this section. However, let’s first examine two instances using methods covered in this tutorial: Using v-bind:style for in-line styling and v-bind:class for class assignment
Inline Styling
In Vue, we utilize v-bind:style for in-line styling.
Example
Using in-line styling, a <div> element’s opacity can be altered via a <input type=”range”> element.
<input type="range" v-model="opacityVal">
<div v-bind:style="{ backgroundColor: 'rgba(155,20,20,'+opacityVal+')' }">
Drag the range input above to change opacity here.
</div>
Assign a Class
To give an HTML tag in Vue a class, we use v-bind:class.
Example
Choose pictures of food. Using v-bind:class, selected food is highlighted to indicate what you have chosen.
<div v-for="(img, index) in images">
<img v-bind:src="img.url"
v-on:click="select(index)"
v-bind:class="{ selClass: img.sel }">
</div>
Other Ways to Assign Classes and Style
Here are some other facets of using v-bind:class and v-bind:style that are not covered in this tutorial:
- When an HTML tag has both class=”” and v-bind:class=”” set to it, CSS classes are applied. Vue merges the classes.
- Using v-bind:class=”{}”, one or more classes are assigned to an object. One or more classes may be toggled on or off within the object.
- Using v-bind:style (in-line styling) ‘Kebab-case’ can be used if it is written inside quotes, although camelCase is the recommended style when defining a CSS property.
- It is possible to assign CSS classes using arrays, array notation, or array syntax.
We go into greater detail on each of these points below.
1. Vue Merges 'class' And 'v-bind:class'
When an HTML tag is assigned to both a class with v-bind:class=”” and a class assigned with class=””, Vue handles the class merging for us.
Example
‘impClass’ and ‘yelClass’ are the two classes to which a <div> element belongs. The ‘yellow’ class is set using v-bind:class, and the ‘important’ class is set using the class attribute in the usual manner.
<div class="impClass" v-bind:class="{yelClass: isYellow}">
This div belongs to both 'impClass' and 'yelClass'.
</div>
2. Assign More Than One Class With 'v-bind:class'
You can apply multiple classes to an HTML element by simply separating them with commas when using v-bind:class=”{}”.
Example
The classes “yelClass” and “impClass” can both apply to a <div> element, based on the boolean Vue data variables “isYellow” and “isImportant.”
<div v-bind:class="{yelClass: isYellow, impClass: isImportant}">
This tag can belong to both the 'impClass' and 'yelClass' classes.
</div>
3. Camel case vs kebab case notation with 'v-bind:style'
It is advised to use camel Case notation for the CSS property when altering CSS in Vue with in-line styling (v-bind:style), however ‘kebab-case’ can also be used if the CSS property is inside quotes.
Example
This time, we use the suggested method with camel Case backgroundColor to specify the CSS properties background-color and font-weight for a <div> element; the alternative method with ‘kebab-case’ in quotes for ‘font-weight‘ is not recommended. Both options are functional.
<div v-bind:style="{ backgroundColor: 'lightpink', 'font-weight': 'bolder' }">
This div tag has pink background and bold text.
</div>
There are two notations for writing a string of words without spaces or punctuation: “camel case” and “kebab case.”
- Camel case notation is when the first word starts with a small letter, and every word after starts with a capital letter, like ‘backgroundColor’ or ‘camelCaseNotation’. Because we can picture every capital letter looking like a hump on a camel’s back, it is known as “camel case.”
- Kebab case Notation, such as “background-color” or “kebab-case-notation,” is the separation of words with a dash (-). The reason it’s called a “kebab case” is that the dashes kind of look like the skewer in a “shish kebab.”
4. Array Syntax with 'v-bind:class'
To add more classes, we can use the array syntax in conjunction with v-bind:class. We can use classes that rely on Vue properties as well as those that don’t by using array syntax.
Example
Here we use array syntax to set the CSS classes ‘yelClass’ and ‘impClass’. The class ‘yelClass’ is always associated to the <div> element, but the class ‘impClass’ depends on the Vue property isImportant.
<div v-bind:class="[{ impClass: isImportant }, 'yelClass' ]">
This div tag belongs to one or two classes depending on the isImportant property.
</div>
