v-for 列表渲染指令

當需要將一個陣列遍歷或列舉一個物件迴圈顯示時，就會用到列表渲染指令v-for，它的表示式需結合in來使用，類似item in items的形式

    <div id="app">
        <ul>
            //index是一個可選引數，作為當前項的索引
            <li v-for="(book,index) in books">{{ index }} - {{ book.name }}</li>
        </ul>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                books: [
                    { name: 'vue.js' },
                    { name: 'javascript' },
                    { name: 'node.js' }
                ]
            }
        })
    </script>

v-for也可以用在內建標籤template上，將多個元素進行渲染

    <div id="app">
        <ul>
            <template v-for="book in books">
                <li>書名:{{ book.name }}</li>
                <li>作者:{{ book.author }}</li>
            </template>
        </ul>
    </div>
    <script>
    var app = new Vue({
        el:'#app',
        data: {
            books: [
                {
                name: 'vuejs',
                author: 'liang'
                },
                {
                name: 'javascript',
                author: 'douglas'
                },
                {
                name: 'nodejs',
                author: 'thomas'
                }
            ]
        }
    })
    </script>

除了陣列，物件的屬性也是可以遍歷的

    <div id="app">
        //遍歷物件屬性時，有兩個可選引數，分別時鍵名key和索引index
        <span v-for="(value, key, index) in user">
        {{ index }} - {{ key }}: {{ value }}
        </span>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                user: {
                    name: 'aresn',
                    gender: '男',
                    age: 26
                }
            }
        })
    </script>

本作品採用《CC 協議》，轉載必須註明作者和本文連結