Vue TutorialLesson 14Free preview

Vue CSS Binding

This lesson is part of Vue · All levels

Summary

Vue facilitates the dynamically binding of CSS classes and inline styles through:class and :style. The bounded values can be strings, arrays, or objects so that determining the active class becomes very concise. This system combines a static class on a class attribute with a dynamic class, rather than overlap it.

Key points

:class binds a dynamic CSS class to the element.
:class values can be strings, arrays, or objects with boolean values.
Static classes on a class attribute are combined with dynamic classes, not overlapped.
:style binds the inline style property, usually given in camelCase objects.
Some style objects can be combined into an array to make it more readable.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.