Lesson 10 — Class binding

Classes that follow state

:class accepts an object where each key is a class name and each value is a condition: :class="{ active: on }" adds the class active only while on is true. It works alongside a normal class attribute. The CSS for the class lives in a <style> block.

<li :class="{ done: task.done, urgent: task.priority > 2 }">{{ task.title }}</li>

Why it matters: selected tabs, error fields and highlighted rows are all class bindings.