Dynamic Styling and Class Toggling in Vue 3 with v-bind

<!-- src/components/DynamicStylingExample.vue -->
<template>
  <div class="card">
    <h2>Dynamic Classes</h2>
    <div
      :class="{ active: isActive, 'text-red': hasError }"
      class="base-box"
    >
      Conditional Class Box
    </div>
    <div :class="[activeClass, errorClass]" class="base-box">
      Array Syntax Class Box
    </div>
    <button @click="toggleActive">Toggle Active</button>
    <button @click="toggleError">Toggle Error</button>

    <h2>Dynamic Styles</h2>
    <div
      :style="{
        backgroundColor: bgColor,
        fontSize: fontSize + 'px',
        border: borderWidth + 'px solid ' + borderColor
      }"
      class="base-box"
    >
      Inline Dynamic Style Box
    </div>
    <div :style="dynamicStyleObject" class="base-box">
      Object Dynamic Style Box
    </div>
    <button @click="changeColors">Change Colors</button>
    <button @click="increaseFont">Increase Font</button>
  </div>
</template>

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

// Dynamic Classes
const isActive = ref(true);
const hasError = ref(false);

const toggleActive = () => {
  isActive.value = !isActive.value;
};

const toggleError = () => {
  hasError.value = !hasError.value;
};

// Array syntax for classes
const activeClass = ref('active-style');
const errorClass = ref('error-style');

// Dynamic Styles
const bgColor = ref('lightblue');
const fontSize = ref(16);
const borderWidth = ref(2);
const borderColor = ref('blue');

const dynamicStyleObject = computed(() => ({
  backgroundColor: isActive.value ? 'lightgreen' : 'lightcoral',
  padding: '10px',
  borderRadius: '5px'
}));

const changeColors = () => {
  bgColor.value = bgColor.value === 'lightblue' ? 'lightgray' : 'lightblue';
  borderColor.value = borderColor.value === 'blue' ? 'green' : 'blue';
};

const increaseFont = () => {
  fontSize.value += 2;
};
</script>

<style scoped>
.card {
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 8px;
  margin-bottom: 20px;
}
.base-box {
  width: 200px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px;
  border: 1px solid #ccc;
  transition: all 0.3s ease;
}
.active {
  background-color: #42b983;
  color: white;
}
.text-red {
  color: red;
  font-weight: bold;
}
.active-style {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.error-style {
  border-color: red;
}
</style>