繼昨天的字串for迴圈後，希望大家對x-for有基本的了解了。
接著今天要將數字帶入迴圈，請看下面範例:

認識for裡面的index

<div x-data="{items:['a','b','c','d']}">
    <template x-for="(item, index) in items" :key="index">
        <!-- 如果你需要的話，也可以在疊代的內部使用「index」-->
        <div><span x-text="index"></span><span x-text="item"></span></div>
    </template>
</div>

這個範例最主要提的是x-for="(item, index) in items"，
而index值會從0(跑第1次)開始跑，
直到跑完迴圈(這個範例會跑到3)，
方便在於這個迴圈中每個資料都會自動帶入不同的index值，
讓我們在使用上會變得非常方便!
像是這邊我在同一行列出index和item，
那若是希望數字從1開始列當然也可以，
直接將x-text="index"改為x-text="index+1"他也會計算喔(因為是數字)。

依序列出的數字

<div x-data>
    <template x-for="i in 10" :key="i">
        <span x-text="i"></span>
    </template>
</div>

這個範例他沒有給任何預設值，
那麼他就會從數字1開始，
所以，x-for="i in 10"在這就會從i=1一直跑到i=10，
<span x-text="i"></span>而這個列印放在template標籤內，
因此每跑一次都會印一個出來，
結果就會顯示出1到10的數字。

若是在x-data中預設x-data="{i:3}"，
i就會一直是3直到迴圈結束，
就是會印出10個3的意思。

點擊改變的數字

<div x-data="{ count: 10 }">
    <template x-for="i in count" :key="i">
        <span x-text="i"></span>
    </template>
    <button type="button" @click="count++">Increment count</button>
</div>

在這有兩個變數，分別為i和count，
這邊與上個範例非常相似，
將原本的10用變數count取代，
在x-data="{ count: 10 }"預設count為10，
首先進到頁面時for迴圈會先跑完，列出1到10的數字，
旁邊還有一個button，
而這個button裡面寫了@click="count++"，
意思同count=count+1，點一下count會10+1=11的意思，
那麼迴圈的count原先只跑到10，
現在count增為11，迴圈還是會繼續跑到count結束，
所以，count不斷的增加，
count後面加上去的數字也是會繼續被印出來的，很神奇吧!