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>