javascript / beginner
Snippet
Dynamic CSS Class Binding
You can pass an object to :class to dynamically toggle CSS classes based on the truthiness of their values.
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
Breakdown
1
:class="{ active: isActive }"
Applies the 'active' class only if isActive is true.
2
'text-error': hasError
Kebab-case class names must be quoted in the object.