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 协议》，转载必须注明作者和本文链接