Vue Class

Posted on  by admin

Vue's v-bind syntax supports dynamically binding classes via anobject syntax. You can conditionally bind multiple classes, and use the : shorthand for v-bind::. The value you bind to class with v-bind can be a string, not just anobject.

For example, you can store the class name in a data string:. Another neat approach is to use the ternary operator to decide which class the element will have:.

String Syntax

You can also bind the class to an array. Vue will then combine allelements in the array to form the final class binding.

Binding HTML Classes

This lets youmix and match string and object syntax in one declaration:.

Vue School has some of our favorite Vue video courses. Their Vue.js Master Class walks you through building a real world application, and does a great job of teaching you how to integrate Vue with Firebase.

More Vue Tutorials

In this guide, we will look at class binding with the Vue v-bind directive.

Class binding comes in handy when we have the need of manipulating an element’s class list.

Not the answer you're looking for? Browse other questions tagged javascriptvue.jsvuejs2conditional-formatting or ask your own question.

We can either pass an object or array to dynamically toggle a class.

The above syntax means that the class . The above syntax means that the class active would be present on the said element( a div in this instance ) as long as the expression evaluates to true.Multiple classes can also be bound as seen here:.

Array Syntax

Array SyntaxWe can as well pass an array to apply a list of classes. Modified10 months ago. I have some data that is accessible via:. and this evaluated to either true or false.

Binding Inline Styles

I'd like to add a class depending on the truthiness of the expression like so:.
where true gives me the class fa-checkbox-marked and false would give me fa-checkbox-blank-outline.
The way I wrote it above gives me an error:. How should I write it to be able to conditionally determine the class?
128128 bronze badges. 5,52888 gold badges3939 silver badges7777 bronze badges.
3939 silver badges7777 bronze badges. Use the object syntax.
When the object gets more complicated, extract it into a method.
Finally, you could make this work for any content property like this.
1414 gold badges188188 silver badges158158 bronze badges.
158158 bronze badges. Why not pass an object to v-bind:class to dynamically toggle the class:.