Sometimes, we want to add conditional class style binding with Vue.js.

In this article, we’ll look at how to add conditional class style binding with Vue.js.

How to add conditional class style binding with Vue.js?

To add conditional class style binding with Vue.js, we can set the :class prop.

For instance, we write

<template>
  <div
    :class="{
      'fa-checkbox-marked': content.cravings,
      'fa-checkbox-blank-outline': !content.cravings,
    }"
  ></div>
</template>

to set the class prop to an object that applies the fa-checkbox-marked class is content.cravings is true.

And we apply the fa-checkbox-blank-outline class if content.cravings is false.

Conclusion

To add conditional class style binding with Vue.js, we can set the :class prop.