列表渲染

用 v-for 把一個陣列對應為一組元素

<div id="app">
    <li v-for = "item in array">
        {{item.message}}
    </li>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            array:[
                {message:'vue1'},
                {message:'vue2'},
                {message:'vue3'}
            ]
        },
    })
</script>
複製程式碼

<div id="app">
    <li v-for = "item in array">
        {{item}}
    </li>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            array:[
                'vue1',
                'vue2',
                'vue3'
            ]
        },
    })
</script>
複製程式碼

結果：

v-for 還支援一個可選的第二個引數為當前項的索引。

<div id="app">
    <ul id="example-2">
        <li v-for="(item, index) in items">
            {{ index }} - {{ item.message }}
        </li>
    </ul>
</div>
<script>
    var example2 = new Vue({
        el: '#example-2',
        data: {
            items: [
                {message:'vue1'},
                {message:'vue2'},
                {message:'vue3'}
            ]
        }
    })
</script>
複製程式碼

結果：

物件的 v-for 可以用 v-for 通過一個物件的屬性來迭代。

<ul id="v-for-object" class="demo">
    <li v-for="value in object">
        {{ value }}
    </li>
</ul>
<script>
    new Vue({
        el: '#v-for-object',
        data: {
            object: {
                o: 'vue1',
                ob: 'vue2',
                obj: 'vue3'
            }
        }
    })
</script>
複製程式碼

結果：

<ul id="v-for-object" class="demo">
    <li v-for="(value,key) in object">
        {{key}}: {{ value }}
    </li>
</ul>
<script>
    new Vue({
        el: '#v-for-object',
        data: {
            object: {
                obj1: 'vue1',
                obj2: 'vue2',
                obj3: 'vue3'
            }
        }
    })
</script>
複製程式碼

結果：

<ul id="v-for-object" class="demo">
    <li v-for="(value,key,index) in object">
        {{index}}. {{key}}: {{ value }}
    </li>
</ul>
<script>
    new Vue({
        el: '#v-for-object',
        data: {
            object: {
                obj1: 'vue1',
                obj2: 'vue2',
                obj3: 'vue3'
            }
        }
    })
</script>
複製程式碼

結果: