Dynamic Class and Style Binding in Vue 3

<template>
  <div>
    <!-- Object Syntax for Classes -->
    <div :class="{ 'active-item': isActive, 'error-text': hasError }">
      Item with dynamic classes
    </div>

    <button @click="toggleActive">Toggle Active</button>
    <button @click="toggleError">Toggle Error</button>

    <!-- Array Syntax for Classes -->
    <div :class="[baseClass, { 'highlight': isHighlighted }]" class="static-class">
      Another item with array classes
    </div>
    <button @click="toggleHighlight">Toggle Highlight</button>

    <!-- Object Syntax for Inline Styles -->
    <div :style="{ color: textColor, fontSize: fontSize + 'px' }">
      Text with dynamic styles
    </div>
    <button @click="increaseFontSize">Increase Font Size</button>

    <!-- Array Syntax for Inline Styles (less common, but possible) -->
    <div :style="[baseStyles, conditionalStyles]">
      Text with array styles
    </div>
    <button @click="toggleBorder">Toggle Border</button>
  </div>
</template>

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

const isActive = ref(true);
const hasError = ref(false);
const isHighlighted = ref(false);
const fontSize = ref(16);
const showBorder = ref(false);

const baseClass = 'common-style';

const textColor = ref('green');

const baseStyles = reactive({
  backgroundColor: '#eee',
  padding: '10px'
});

const conditionalStyles = computed(() => ({
  border: showBorder.value ? '1px solid black' : 'none'
}));

function toggleActive() {
  isActive.value = !isActive.value;
}

function toggleError() {
  hasError.value = !hasError.value;
}

function toggleHighlight() {
  isHighlighted.value = !isHighlighted.value;
}

function increaseFontSize() {
  fontSize.value += 2;
}

function toggleBorder() {
  showBorder.value = !showBorder.value;
}
</script>

<style scoped>
.active-item {
  background-color: lightblue;
  border: 1px solid blue;
  padding: 10px;
}
.error-text {
  color: red;
  font-weight: bold;
}
.common-style {
  margin-top: 10px;
  padding: 5px;
  border: 1px solid gray;
}
.highlight {
  box-shadow: 0 0 5px orange;
}
</style>