Dynamic Classes and Styles

Vue allows you to apply classes and styles dynamically based on data. This helps change the appearance of elements depending on the application state.

To bind classes, use the :class directive.

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

const isActive = ref(true);
</script>

<template>
  <p :class="{ active: isActive }">Status</p>
</template>

<style>
.active {
  color: #4f46e5;
  font-weight: bold;
}
</style>

When isActive is true, the active class is applied. If it becomes false, the class is removed.

You can also apply multiple classes.

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

const isActive = ref(true);
const isError = ref(false);
</script>

<template>
  <p :class="{ active: isActive, error: isError }">Message</p>
</template>

To bind inline styles, use the :style directive.

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

const color = ref("blue");
</script>

<template>
  <p :style="{ color: color }">Styled text</p>
</template>

Dynamic classes and styles allow you to control the appearance of elements based on your data.