循环指令

作用：

根据一组数组或对象的选项列表进行渲染。

指令：

v-for

:key的作用:

提高性能，不影响显示效果（如果没有id，可以考虑使用索引替代），切记key的值不能重复，只要遵循不重复的原则即可，值是什么无所谓。

数组遍历

<body>
    <div id="app">
        <!-- 预期效果 -->
        <ul>
            <li v-for="item in fruits">{{item}}</li>
        </ul>
        <hr>
        <ul>
            <li v-for="(item,index) in fruits" :key="index">{{index}} - {{item}}</li>
        </ul>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            fruits: ["apple", "pear", "banana", "orange"],
        },
    });
</script>

对象遍历

<body>
    <div id="app">
        <ul>
            <li :key="index" v-for="(val,name,index) in obj">{{index}} - {{name}} - {{val}}</li>
        </ul>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            obj: {
                username: "zhangsan",
                age: 28,
                gender: "male", //sex
            },
        },
    });
</script>

一沙一世界，一花一天堂。君掌盛无边，刹那成永恒。