javascript / beginner
Snippet
Dynamische CSS-Klassenbindung
Du kannst ein Objekt an :class übergeben, um CSS-Klassen basierend auf der Richtigkeit (Truthiness) ihrer Werte dynamisch umzuschalten.
snippet.js
javascript
1
2
3
4
5
6
7
8
<template><div :class="{ active: isActive, 'text-error': hasError }"></div></template><script setup>const isActive = true;const hasError = false;</script>
vue
Erklärung
1
:class="{ active: isActive }"
Wendet die Klasse 'active' nur an, wenn isActive wahr ist.
2
'text-error': hasError
Klassennamen in Kebab-Case müssen im Objekt in Anführungszeichen stehen.