Use Computed Properties for Complex Class Logic

Rule

When class bindings involve multiple conditions or complex logic, extract them into computed properties rather than writing inline expressions in templates.

Why This Matters

Inline class expressions quickly become unreadable with multiple conditions
Computed properties are cached and only re-evaluate when dependencies change
Logic in computed properties is easier to test and debug
Keeps templates focused on structure, not logic

Bad Code

<template>
  <!-- Hard to read, error-prone -->
  <div :class="{
    'btn': true,
    'btn-primary': type === 'primary' && !disabled,
    'btn-secondary': type === 'secondary' && !disabled,
    'btn-disabled': disabled,
    'btn-loading': isLoading,
    'btn-large': size === 'large',
    'btn-small': size === 'small'
  }">
    {{ label }}
  </div>

  <!-- Even worse: string concatenation -->
  <div :class="'btn btn-' + type + (disabled ? ' btn-disabled' : '') + (isLoading ? ' btn-loading' : '')">
    {{ label }}
  </div>
</template>

Good Code

<script setup>
import { computed } from 'vue'

const props = defineProps({
  type: { type: String, default: 'primary' },
  size: { type: String, default: 'medium' },
  disabled: Boolean,
  isLoading: Boolean,
  label: String
})

const buttonClasses = computed(() => ({
  'btn': true,
  [`btn-${props.type}`]: !props.disabled,
  'btn-disabled': props.disabled,
  'btn-loading': props.isLoading,
  'btn-large': props.size === 'large',
  'btn-small': props.size === 'small'
}))
</script>

<template>
  <div :class="buttonClasses">
    {{ label }}
  </div>
</template>

Style Bindings Too

The same principle applies to style bindings:

<script setup>
import { computed } from 'vue'

const props = defineProps({
  color: String,
  fontSize: Number,
  isHighlighted: Boolean
})

const textStyles = computed(() => ({
  color: props.color,
  fontSize: `${props.fontSize}px`,
  backgroundColor: props.isHighlighted ? 'yellow' : 'transparent',
  fontWeight: props.isHighlighted ? 'bold' : 'normal'
}))
</script>

<template>
  <span :style="textStyles">Styled text</span>
</template>

Combining Static and Dynamic Classes

Use array syntax to combine static classes with computed dynamic classes:

<script setup>
import { computed } from 'vue'

const dynamicClasses = computed(() => ({
  'is-active': isActive.value,
  'is-disabled': isDisabled.value
}))
</script>

<template>
  <!-- Static 'card' class + dynamic classes -->
  <div :class="['card', dynamicClasses]">
    Content
  </div>
</template>

2.7 KiB Raw Blame History