2021-07-31 v-for实现多层嵌套遍历(二维数组的遍历)以及遍历数组与对象的用法

本文详细介绍了如何使用 Vue 的 v-for 指令进行多层嵌套遍历，包括二维数组的遍历方法，并提供了具体的代码示例及运行结果展示。此外，还探讨了v-for遍历数组和对象的不同用法，通过代码实例阐述了遍历过程。

1.v-for实现多层嵌套遍历

代码

<div id="app">
    <div v-for="(item,index) in person">
        我叫{{item.name}},我每天上午:
        <!-- 注:item.daily是把item取出来给第二层用 -->
        <div v-for="(items,indexs) in item.daily">
            {{items.am}}
        </div>
    </div>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            person:[
                {
                	id:1,
                    name:"张三",
                    daily:[
                        {am:"睡觉"},
                        {am:"看书"}
                    ]
                },
                {
                    id:2,
                    name:"李四",
                    daily:[
                        {am:"看视频"},
                        {am:"玩游戏"}
                    ]
                },
            ]
        }
    })
</script>

结果

我叫张三,我每天上午:
睡觉
看书
我叫李四,我每天上午:
看视频
玩游戏

2.v-for遍历数组和遍历对象

代码:

<div id="app">
    <div v-for="(item,index) in arr">
        第{{index+1}}名是{{item}}
    </div>
    <div v-for="(value,key,index) in obj">
        第{{index+1}}栏信息:属性名:{{key}},属性值:{{value}}
    </div>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            arr:["张三","李四"],
            obj:{
                name:"王五",
                age:18
            }
        }
    });

结果

第1名是张三
第2名是李四

第1栏信息:属性名:name,属性值:王五
第2栏信息:属性名:age,属性值:18

总结

v-for的强大之处在于:
    当遍历数组时,切换数组形态,形参顺序:item,index
    当遍历对象时,切换对象形态,形参顺序:value,key,index