Conditional classes in Vue

Published on: Thursday, 04.01.2024

Tags can have classes declared in Vue the same way as in HTML:

<div class="container">

To show a class conditionally use:

<div :class="{ container: isTrue}"> 
<!-- isTrue being a ref that we can toggle between true and false. -->

Class and dynamic class (:class) can co-exist on the same element. Binding can also be done to a computed property that returns an object.

const classObj = computed(() => {
return {
  'container': true,
  visible: ifVisible
  }
})