這篇來講解簡易的for迴圈吧。先上範例:
這裡為了要有滑進滑出的效果，附上css，當然變更就可以客製化了!

css

    .opacity-0 { opacity: 0; }
    .opacity-100 { opacity: 1; }
    .transition-slow { transition-duration: 300ms; }
    .transition-medium { transition-duration: 200ms; }
    .transition-faster { transition-duration: 100ms; }
    .scale-90 { transform: scale(0.9); }
    .scale-100 { transform: scale(1); }
    .ease-in { transition-timing-function: cubic-bezier(0.4, 0, 1, 1); }
    .ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }

html

    <div x-data="{ items: ['foo', 'bar'] }">
        <input type="checkbox" x-model="items" value="foo">
        <input type="checkbox" x-model="items" value="bar">
        <input type="checkbox" x-model="items" value="baz">

        <button @click="items = ['bar', 'bob']">hey</button>

        <template x-for="item in items" :key="item">
            <div x-text="item" 
                x-transition:enter-start="opacity-0 scale-90"
                x-transition:enter="ease-out transition-medium" 
                x-transition:enter-end="opacity-100 scale-100"
                x-transition:leave-start="opacity-100 scale-100" 
                x-transition:leave="ease-in transition-faster"
                x-transition:leave-end="opacity-0 scale-90"></div>
        </template>
    </div>

首先看到x-data="{ items: ['foo', 'bar'] }"，
這裡面擺了items這個陣列，這個陣列是後面我們要用來跑回圈的陣列喔!
而陣列裡預設有'foo'和'bar'字串。

向下看，底下有三個checkbox的input框框，
他們的x-model都綁在items陣列上，
value分別為'foo'(x-data裡預設),'bar'(x-data裡預設),'baz'，
因此，一進到網頁value為foo和bar的checkbox是打勾的。

再看到底下的button，裡面寫了@click="items = ['bar', 'bob']"，
直接指定了items陣列裡只有'bar'及'bob'，
無論你前面加了什麼減了什麼只要點擊這button就會把原來的items陣列蓋掉。

接著是最重要的迴圈，
先撇開動畫不看

    <template x-for="item in items" :key="item">
        <div x-text="item"></div>
    </template>

x-for 必須使用在 標籤內擁有根元素的情形下。
:key 的繫結是可選的，但強烈建議你使用。

所以，先在外面寫上template標籤，
for迴圈裡面包夾一個<div x-text="item"></div>，
把陣列裡每個子項目都印出來。

x-for="item in items"這迴圈裡面可以解析為以下
x-for="陣列裡的子項目 in [陣列]"
以當items=['foo', 'bar','baz']時舉例:
第一次經過這行時，
item='foo'，那麼x-text就先印出'foo'，
第二次經過這行時，
item='bar'，那麼x-text就先印出'bar'，
第三次經過這行時，
item='baz'，那麼x-text就先印出'baz'，
因為子項目只有三項，在這迴圈就結束了。
所以說for迴圈跑的次數會跟陣列裡的項目連動喔!

最後再補充 巢套 x-for

    <div x-data="{ 
        items:[
        {subItems:['a','b','c']},
        {subItems:['d','e','f']},
        {subItems:['g','h','i']}
        ] 
    }">

        <template x-for="item in items">
            <div>
                <template x-for="subItem in item.subItems">
                    <div x-text="subItem"></div>
                </template>
            </div>
        </template>
    </div>

這個範例會把所有的印出來
原理和單層迴圈是一樣的，
item.subItems的意思就是item裡的subItems，
多層迴圈也是以此類推，
就可以跑出很多很多迴圈了~