Vue 的迴圈使用 v-for 標籤(類似C# Java 等地 for each 的迴圈形式):

1
2
3
4
5
6
7
 
<div id="app">
    <ul>
        <li v-for="n in 10">
            {{ n }}
        </li>
    </ul>
</div>

 

由於此案例直接標籤上即有足夠的資訊，因此僅需要建立一個Vue 控制元件即可。

1
2
3
4
5
 
<script>
    new Vue({
        el: '#app'
    })
</script>

 

 

若需顯示的資料來源為多筆資料，可以將v-for 寫成以下樣式( object 為 資料陣列的標籤 ):

1
2
3
4
5
6
7
 
<div id="app_2">
    <ul>
        <li v-for="value in object">
            {{ value }}
        </li>
    </ul>
</div>

 

建立一個控制元件，並將資料陣列放置於data標籤底下:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
 
<script>

    new Vue({
        el: '#app_2',
        data: {
            object: {
                name: 'demo for loop',
                url: 'http://example.com',
                slogan: 'dream.'
            }
        }
    })
</script>

 

(專案連結)

 

arrow
arrow
    文章標籤
    vue.js
    全站熱搜

    Lung-Yu,Tsai 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄