LuisLlamas Logo
EN
vuejs-estilos-en-linea

How to Apply Inline Styles with :style in Vue.js

  • 3 min
  • Beginner

Let’s start to see how to apply styles to our components in Vue.js, beginning with the use of inline styles.

This is very easy as we can bind the style attribute to a dynamic and reactive variable, just as we would with any other attribute of an HTML element.

This allows us to customize the appearance of the components by applying CSS properties directly to the elements based on the application’s state, without the need to define CSS classes.

In general, we will prefer to use classes rather than inline styles. But sometimes, inline styles are useful, so it’s good to know about them.

How to use :style

The :style directive allows us to dynamically bind CSS styles to elements or components. That is, 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 a blue text color and a font size of 18 pixels.

Combining Static and Dynamic Styles

If we have inline styles that we always want to apply (static), along with others that 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 the color and font size.

Applying Styles with an Object

We can bind multiple styles using an object within :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 a 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 is 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 isActive is true, and red if it is false.
  • The background will be yellow if hasError is true, and transparent if it is false.

Practical Examples

Change Background Color Based on State

Suppose we want to change the background color of a button depending on whether it is 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 its background color depending on whether it is active or inactive.

Apply Conditional Styles in a List

Suppose we want to highlight items in a list 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, the list items with active: true are highlighted with a yellow background.

On this page