Vue_v-for的四种用法示例

v-for循环普通数组

v-for循环对象数组

v-for循环对象

v-for迭代数字

<div id="app">
        <!--v-for循环普通数组-->
        <div v-for="(item,index) in list">单项:{{item}}---索引号:{{index}}</div>
        <div v-for="item in list">---单项---{{item}}</div>

        <!--v-for循环对象数组-->
        <div v-for="person in arrObj">id:{{person.id}}---name:{{person.name}}</div>
        <div v-for="(person,index) in arrObj">id:{{person.id}}---name:{{person.name}}---索引号:{{index}}</div>

        <!--v-for循环对象-->
        <div v-for="(value,key,index) in obj">值：{{value}}---键：{{key}}---索引：{{index}}</div>

        <!--v-for迭代数字-->
        <div v-for="count in 10">{{count}}</div>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                list: [1, 2, 3, 4, 5, 6],
                arrObj: [{
                        id: 1,
                        name: "name1"
                    },
                    {
                        id: 2,
                        name: "name2"
                    }, {
                        id: 3,
                        name: "name3"
                    }, {
                        id: 4,
                        name: "name4"
                    }
                ],
                obj: {
                    name: "stain",
                    age: 27,
                    job: "engineer"
                }
            }
        });
    </script>