Динамика AlpineJS - Снова про циклы

В Alpine.js для организации циклов используется директива x-for. Как и x-if она может применяться только к тэгу TEMPLATE и иметь один корневой элемент.

Заданное количество итераций

 Выводим css-классы цветов.

<div x-data>
    <div class="b-flex flex-wrap">
        <template x-for="i in 9">
            <div :class="'bg-blue'+ i + '00'" :title="'blue' + i + '00'" class="pad20"></div>
        </template>
    </div>
</div>

Обход данных в цикле

Массив может содержаться в значении x-data. Пример:

<div x-data='{users: [
        {id: 1, name: "Leanne Graham", email: "Sincere@april.biz"},
        {id: 2, name: "Ervin Howell", email: "Shanna@melissa.tv"},
        {id: 3, name: "Clementine Bauch", email: "Nathan@yesenia.net"}
    ]}'>
    
	<template x-for="user in users" :key="user.id">
		<div class="b-flex">
			<div x-text="user.name" class="w3col"></div>
			<div x-text="user.email"></div>
		</div>
	</template>
</div>