javascript / beginner
Snippet
Dynamische Klassenbindung
CSS-Klassen können dynamisch umgeschaltet werden, indem ein Objekt an :class übergeben wird. Ist der Wert wahr, wird die Klasse angewendet.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
<script setup>import { ref } from 'vue';const isError = ref(true);</script><template><div :class="{ 'text-red': isError, 'bold': true }">Status Message</div></template>
vue
Erklärung
1
:class="{ 'text-red': isError }"
Wendet 'text-red' nur an, wenn die Variable 'isError' wahr ist.
2
'bold': true
Eine statische Klasse innerhalb des Objekts, die immer angewendet wird.