• 如何遍历对象?——也可以用 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>

标签: none

添加新评论