Vue 循环（列表）渲染

循环

• 如何遍历对象？——也可以用 v-for
• key 的重要性。key 不能乱写（如 random 或者 index）
• v-for 和 v-if 不能一起使用

<template>
    <div>
        <p>遍历数组</p>
        <ul>
            <li v-for="(item, index) in listArr" :key="item.id">
                {{index}} - {{item.id}} - {{item.title}}
            </li>
        </ul>
        <p>遍历对象</p>
        <ul >
            <!--报错 v-for 优先级更高-->
            <!--<li v-if="flag" v-for="(val, key, index) in listObj" :key="key">-->
            <li v-for="(val, key, index) in listObj" :key="key">
                {{index}} - {{key}} - {{val.title}}
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    data() {
        return {
            flag: false,
            listArr: [
                { id: 'a', title: '标题1' }, // 数据结构中，最好有 id ，方便使用 key
                { id: 'b', title: '标题2' },
                { id: 'c', title: '标题3' }
            ],
            listObj: {
                a: { title: '标题1' },
                b: { title: '标题2' },
                c: { title: '标题3' },
            }
        }
    }
}
</script>