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.