列表渲染

用 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>

結果: