Back
VueEasyNew
How do you conditionally style elements based on component state?
Class and style bindings
Ideal Answer
Vue supports dynamic class and style bindings via v-bind (:class, :style), accepting objects or arrays:
JavaScript
<template>
<div :class="{ active: isActive, 'text-danger': hasError }">...</div>
<div :class="[baseClass, isActive ? 'active' : '']">...</div>
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }">...</div>
</template>Object syntax toggles classes based on truthiness of each key; array syntax lets you combine static and dynamic classes flexibly.