Kapitel 14: Stilbindung (Class & Style)

📙 Lernziel: Dynamische Klassen und Styles mit Vue 3 binden!

---

14.1 Klassenbindung (:class) - Objekt-Syntax

Objekt-Syntax: Klasse wird hinzugefügt, wenn Wert true ist.

Beispiel:

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

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

const classObject = reactive({
  active: true,
  'text-danger': false
})
</script>

<template>
  <!-- Objekt-Syntax (inline) -->
  <div :class="{ active: isActive, 'text-danger': hasError }">
    Inhalt
  </div>
  
  <!-- Objekt-Syntax (computed) -->
  <div :class="classObject">
    Inhalt
  </div>
  
  <!-- Mit Methoden/Computed -->
  <div :class="getClassObject()">
    Inhalt
  </div>
</template>

<script setup>
import { computed } from 'vue'

const error = ref(null)
const isActive = ref(true)

const computedClass = computed(() => ({
  active: isActive.value && !error.value,
  'text-danger': error.value
}))
</script>

<template>
  <div :class="computedClass">
    Inhalt
  </div>
</template>

---

14.2 Klassenbindung (:class) - Array-Syntax

Array-Syntax: Fügt alle Klassen im Array hinzu.

Beispiel:

<script setup>
import { ref } from 'vue'

const activeClass = ref('active')
const errorClass = ref('text-danger')
</script>

<template>
  <!-- Array-Syntax (inline) -->
  <div :class="[activeClass, errorClass]">
    Inhalt
  </div>
  
  <!-- Hybrid (Array + Objekt) -->
  <div :class="[{ active: isActive }, errorClass]">
    Inhalt
  </div>
</template>

---

14.3 Stylebindung (:style) - Objekt-Syntax

Objekt-Syntax: CSS-Eigenschaften als camelCase oder kebab-case.

Beispiel:

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

const activeColor = ref('red')
const fontSize = ref(30)

const styleObject = reactive({
  color: 'red',
  fontSize: '30px',
  backgroundColor: '#f0f0f0'
})
</script>

<template>
  <!-- Objekt-Syntax (inline) -->
  <div :style="{ color: activeColor, fontSize: fontSize + 'px' }">
    Inhalt
  </div>
  
  <!-- Objekt-Syntax (reactive) -->
  <div :style="styleObject">
    Inhalt
  </div>
</template>

Wichtig:

• ✅ camelCase: fontSize
• ✅ kebab-case (mit Anführungszeichen): 'font-size'

---

14.4 Stylebindung (:style) - Array-Syntax

Array-Syntax: Fügt mehrere Style-Objekte zusammen.

Beispiel:

<script setup>
import { ref } from 'vue'

const baseStyles = ref({
  color: 'red',
  fontSize: '20px'
})

const overrideStyles = ref({
  color: 'blue',
  fontWeight: 'bold'
})
</script>

<template>
  <div :style="[baseStyles, overrideStyles]">
    Inhalt
  </div>
</template>

---

14.5 Automatisches Präfixing

Vue fügt automatisch Vendor-Präfixe hinzu:

<script setup>
import { ref } from 'vue'

const transformValue = ref('rotate(7deg)')
</script>

<template>
  <!-- Vue fügt automatisch Präfixe hinzu -->
  <div :style="{ transform: transformValue }">
    Inhalt
  </div>
  
  <!-- Wird zu: -->
  <!-- transform: rotate(7deg); -->
  <!-- -webkit-transform: rotate(7deg); -->
  <!-- -ms-transform: rotate(7deg); -->
</template>

---

14.6 Übung: Dynamische Stiländerung

Aufgabe: Erstelle eine Box, deren Hintergrundfarbe und Schriftgröße sich ändern lässt.

Lösung:

<script setup>
import { ref } from 'vue'

const bgColor = ref('#42b883')
const textSize = ref(16)
const isBold = ref(false)
const isRed = ref(false)
</script>

<template>
  <div 
    :style="{
      backgroundColor: bgColor,
      fontSize: textSize + 'px',
      fontWeight: isBold ? 'bold' : 'normal',
      color: isRed ? 'red' : 'black'
    }"
    :class="{ 'highlight': isBold, 'red-text': isRed }"
    style="padding: 20px; margin: 20px 0; border: 1px solid #ccc;"
  >
    Dynamischer Text
  </div>
  
  <div>
    <label>Farbe: <input type="color" v-model="bgColor" /></label><br>
    <label>Größe: <input type="range" v-model="textSize" min="12" max="32" /></label><br>
    <label><input type="checkbox" v-model="isBold" /> Fett</label><br>
    <label><input type="checkbox" v-model="isRed" /> Rot</label>
  </div>
</template>

<style>
.highlight {
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
.red-text {
  text-shadow: 1px 1px 2px rgba(255,0,0,0.5);
}
</style>

---

✅ Zusammenfassung

In diesem Kapitel hast du gelernt:

• ✅ Klassenbindung mit Objekt-Syntax
• ✅ Klassenbindung mit Array-Syntax
• ✅ Stylebindung mit Objekt-Syntax
• ✅ Stylebindung mit Array-Syntax
• ✅ Automatisches Präfixing
• ✅ Praxis: Dynamische Stiländerung

🎯 Nächster Schritt: In Kapitel 15 lernst du die Komponenten-Grundlagen!

---

← Zurück zu Kapitel 13: Watch & WatchEffectWeiter zu Kapitel 15: Komponenten-Grundlagen →