Let’s start seeing how to apply styles to our components in Vue.js, starting by looking at the use of inline styles.
This is very easy since we can bind the style attribute to a dynamic and reactive variable, just as we would with any other HTML element attribute.
This allows us to customize the appearance of components by applying CSS properties directly to elements based on the application’s state, without the need to define CSS classes.
In general, we will prefer to use classes and not inline styles. But sometimes, inline styles are useful, so it’s good to know them.
How to use :style
The :style directive allows us to dynamically bind CSS styles to elements or components. This means we can apply styles based on conditions, states, or reactive data.
<template>
<div :style="dynamicStyle">This is an example of inline style.</div>
</template>
<script setup>
import { ref } from 'vue';
const dynamicStyle = ref({
color: 'blue',
fontSize: '18px',
});
</script>
In this example, the div will have blue text color and a font size of 18 pixels.
Combine static and dynamic styles
If we have inline styles that we always want to apply (static), along with others we want to change dynamically with :style, we can do it like this,
<template>
<div style="padding: 10px;" :style="dynamicStyle">
This is an example of combined styles.
</div>
</template>
<script setup>
import { ref } from 'vue';
const dynamicStyle = ref({
color: 'blue',
fontSize: '18px',
});
</script>
In this example, the div will have a static padding of 10 pixels and dynamic styles for color and font size.
Apply styles with an object
We can bind multiple styles using an object inside :style and replacing the values with variables.
<template>
<div :style="{ color: textColor, fontSize: fontSize + 'px' }">
This is an example of inline style.
</div>
</template>
<script setup>
import { ref } from 'vue';
const textColor = ref('blue');
const fontSize = ref(18);
</script>
In this example, the div will have blue text color and a font size of 18 pixels.
Dynamic styles with computed properties
If the inline style we want to apply is a more complex expression, it’s generally better to define a method or a computed property to define the dynamic style.
<template>
<div :style="complexDynamicStyle">
This is an example of inline style with complex logic.
</div>
</template>
<script setup>
import { ref, computed } from 'vue';
const isActive = ref(true);
const hasError = ref(false);
const complexDynamicStyle = computed(() => {
return {
color: isActive.value ? 'green' : 'red',
backgroundColor: hasError.value ? 'yellow' : 'transparent',
};
});
</script>
In this example:
- The text color will be green if
isActiveistrue, and red if it’sfalse. - The background will be yellow if
hasErroristrue, and transparent if it’sfalse.
Practical examples
Change background color based on state
Suppose we want to change a button’s background color depending on whether it’s active or inactive.
<template>
<button :style="{ backgroundColor: isActive ? 'green' : 'red' }" @click="toggleState">
{{ isActive ? 'Active' : 'Inactive' }}
</button>
</template>
<script setup>
import { ref } from 'vue';
const isActive = ref(true);
function toggleState() {
isActive.value = !isActive.value;
}
</script>
In this example, the button changes background color depending on whether it’s active or inactive.
Apply conditional styles in a list
Suppose we want to highlight list items based on a condition.
<template>
<ul>
<li v-for="item in items" :key="item.id" :style="{ backgroundColor: item.active ? 'yellow' : 'transparent' }">
{{ item.name }}
</li>
</ul>
</template>
<script setup>
import { ref } from 'vue';
const items = ref([
{ id: 1, name: 'Item 1', active: true },
{ id: 2, name: 'Item 2', active: false },
{ id: 3, name: 'Item 3', active: true },
]);
</script>
In this example, list items with active: true are highlighted with a yellow background.
