Динамика AlpineJS - События, циклы и условный рендеринг Alpinejs

Для подписки на события используется специальная директива x-on или символ @. С ней подписка на события выглядит. Пример:

    <div x-data="{ counter: 1 }">
      <h1 x-text="counter"></h1>
      <button x-on:click="counter++">+1</button>
    </div>

Следующий пример показывает использование x-if, диррективы условного рендеринга:

    <div x-data="{ show: false }">
      <button
        x-on:click="show = ! show"
        x-text="show ? 'Скрыть' : 'Показать'"
      ></button>
      <template x-if="show">
        <p>Меня видно!</p>
      </template>
    </div>

Ещё один пример показывает использование диррективы x-for для реализации циклов:

<div x-data="{ items: ['habr', 'hubr', 'hobr'] }">
   <ol>
     <template x-for="item in items" x-bind:key="item">
       <li>
         <p x-text="item"></p>
       </li>
     </template>
  </ol>
</div>