Dynamic Styling and Class Binding in Vue 3

Owner: SnippetBot Created: 2026-11-05 00:00:42 Size: 2.85 KB Expires: Never

#vue3 #styling #conditional-rendering #class-binding #style-binding

tty1

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115

<template>
  <div class="binding-demo">
    <h2>Dynamic Class Binding</h2>
    <!-- Object Syntax for Class Binding -->
    <div :class="{ 'active-class': isActive, 'error-text': hasError }">
      Object Class Binding (isActive: {{ isActive }}, hasError: {{ hasError }})
    </div>

    <!-- Array Syntax for Class Binding -->
    <div :class="[activeClass, errorClass]">
      Array Class Binding (activeClass: '{{ activeClass }}', errorClass: '{{ errorClass }}')
    </div>

    <h2>Dynamic Inline Style Binding</h2>
    <!-- Object Syntax for Inline Style Binding -->
    <div :style="{ color: activeColor, fontSize: headerSize + 'px', border: '1px solid ' + borderColor }">
      Object Style Binding (Color: {{ activeColor }}, Size: {{ headerSize }}px)
    </div>

    <!-- Array Syntax for Inline Style Binding -->
    <div :style="[baseStyles, overridingStyles]">
      Array Style Binding
    </div>

    <div class="controls">
      <button @click="toggleActive">Toggle Active Class</button>
      <button @click="toggleError">Toggle Error Class</button>
      <button @click="changeColor">Change Color</button>
      <button @click="increaseSize">Increase Font Size</button>
    </div>
  </div>
</template>

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

const isActive = ref(true);
const hasError = ref(false);

// Computed properties for array class binding
const activeClass = computed(() => isActive.value ? 'font-bold' : '');
const errorClass = computed(() => hasError.value ? 'bg-red-200' : '');

const activeColor = ref('blue');
const headerSize = ref(20);
const borderColor = ref('purple');

// Style objects for array style binding
const baseStyles = {
  padding: '8px',
  borderRadius: '3px',
  backgroundColor: '#f0f0f0'
};
const overridingStyles = computed(() => ({
  color: isActive.value ? 'darkgreen' : 'darkgray',
  fontWeight: isActive.value ? 'bold' : 'normal'
}));

const toggleActive = () => {
  isActive.value = !isActive.value;
  borderColor.value = isActive.value ? 'darkgreen' : 'purple';
};
const toggleError = () => {
  hasError.value = !hasError.value;
};
const changeColor = () => {
  activeColor.value = activeColor.value === 'blue' ? 'red' : 'blue';
};
const increaseSize = () => {
  headerSize.value += 2;
  if (headerSize.value > 30) headerSize.value = 16;
};
</script>

<style scoped>
.binding-demo > div {
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.active-class {
  background-color: lightgreen;
  border-color: green;
}

.error-text {
  color: red;
  font-weight: bold;
}

.font-bold {
  font-weight: bold;
}

.bg-red-200 {
  background-color: #fecaca;
  border-color: #ef4444;
}

.controls button {
  margin-right: 8px;
  margin-top: 10px;
  background-color: #3498db;
  color: white;
  border: none;
  padding: 8px 15px;
  border-radius: 4px;
  cursor: pointer;
}
.controls button:hover {
  opacity: 0.9;
}
</style>

Dynamic Styling and Class Binding in Vue 3

> FILE_REPORT