On gists

Dynamic classes

Vue.js

examples.js Raw #

<div :class="disabled && 'disabled-component'"></div>

<div :class="disabled ? 'disabled-component' : 'not-yet-disabled'"></div>

<div
  :class="{
    primary: isPrimary,
    secondary: isSecondary,
    tertiary: isTertiary,
  }"
/>

<div
  :class="[
    isPrimary && 'primary',
    isSecondary && 'secondary',
    isTertiary && 'tertiary',
  ]"
/>

<div :class="computedClasses" />

<div :class="[computedClasses, { 'active': isActive }]"></div>


const computedClasses = computed(() => ({
  'text-red': isError.value,
  'text-green': isSuccess.value,
  'font-bold': shouldBeBold.value
}))

// or
const computedClasses = computed(() => [
  isError.value && 'text-red',
  isSuccess.value && 'text-green',
  shouldBeBold.value && 'font-bold'
].filter(Boolean))