Vue Class and Style Bindings Explained — Dynamic Styling

In this tutorial, you will learn about Vue Class and Style Bindings Explained. We cover key concepts, practical examples, and best practices to help you master this topic.

Vue's v-bind:class and v-bind:style provide powerful object and array syntaxes for dynamically applying CSS classes and inline styles based on component state.

What You'll Learn

• Class binding with objects and arrays
• Style binding with objects
• Conditional class application
• Scoped styles in SFCs
• CSS variables with v-bind

Why It Matters

Dynamic styling is essential for state-driven UIs. Vue's binding syntax is more expressive than imperative class manipulation and integrates with scoped styles.

<template>
  <div :class="containerClasses" @click="toggleActive">
    <p :style="{ color: textColor, fontSize: fontSize + 'px' }">
      Status: {{ isActive ? "Active" : "Inactive" }}
    </p>
    <button :class="['btn', `btn-${variant}`]" @click.stop>
      {{ label }}
    </button>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";

const isActive = ref(false);
const variant = ref("primary");
const textColor = ref("blue");
const fontSize = ref(16);

const containerClasses = computed(() => ({
  "container": true,
  "container--active": isActive.value,
  "container--inactive": !isActive.value,
}));

function toggleActive() {
  isActive.value = !isActive.value;
}
</script>

Expected output: Classes toggle between active/inactive on click, and the paragraph uses reactive inline style values.