Master programming syntax, solve interactive challenges & run live code in Syntaxis Explore Arena →

menu_book Course Curriculum (Alpine.js) expand_more

Core State

x-data Reactive properties Nested x-data Reusable data with Alpine.data x-init Alpine.store $store Getters in x-data Methods in x-data this binding in methods

Binding

x-text x-html x-bind Attribute shorthand Class binding Style binding Boolean attributes x-model x-model modifiers x-modelable

Events

x-on Event shorthand $event Keyboard modifiers Mouse modifiers Window events Document events Custom events $dispatch Event debounce

Visibility

x-show x-cloak x-if x-transition Transition duration Transition scale Transition opacity x-collapse plugin Conditional templates Teleport

Lists & Templates

x-for x-for keys Template element Nested loops Array updates Object iteration Dynamic components x-ref $refs $el

Magic Properties

$nextTick $watch $dispatch bubbling $event detail access $refs scope $root $data $id $persist $focus

Plugins & Extensibility

Persist plugin Intersect plugin Focus plugin Mask plugin Morph plugin Anchor plugin Alpine.bind Alpine.directive Alpine.magic Alpine.plugin

Patterns

Dropdown Modal Tabs Accordion Combobox basics Disclosure Toast notification Theme switcher Form validation Async fetch component

Alpine.js / Binding

Class binding

Learn Class binding in Alpine.js with a dedicated explanation, topic-specific example, edge guidance, and mastery check.

12 min read • Beginner

alpinejs-015.html

html

<button x-data="{active:true}" :class="{ 'is-active': active }">Filter</button>

What to watch

Content source & attribution

Original Syntaxis Content · Original Syntaxis Content

Lesson quizzes

Class binding Mastery Check →

Attribute shorthand