How can I use dynamic classes in Vue.js?

How can I use dynamic classes in Vue.js?

In Vue.js, you can use the :class binding to dynamically assign classes based on conditions. For example, you can bind an object or an array to the :class attribute.

Can you show me an example of using an object for dynamic classes?

Sure! Here's a simple example:

<div :class="{ active: isActive, 'text-danger': hasError }">
  Hello World
</div>

In this case, active class will be applied if isActive is true, and text-danger will be applied if hasError is true.

What about using an array for dynamic classes?

You can also use an array to apply multiple classes. For example:

<div :class="[classA, classB, { 'is-active': isActive }]">
  Hello World
</div>

Here, classA and classB are variables that hold class names, and is-active will be applied based on the isActive condition.

Are there any performance considerations I should be aware of?

Yes, while using dynamic classes is powerful, excessive use of complex conditions can impact performance. It's best to keep your logic simple and avoid unnecessary reactivity.