【vue系列课程4】—— 列表渲染v-for

列表渲染v-for

---

遍历数组

1.基本模式（简单列表循环）

<template>
    <section>
       <div class="list">
           <ul>
               <li v-for="name in names">{{ name }}</li>
           </ul>
       </div>
    </section>

</template>
<script>
export default {
    data () {
        return {
            show:true,
            names: ["lili","huahua","xiaoxiao"]
        }
    }
}
</script>

2.有index 绑定key情况

<template>
    <section>
       <div class="list">
           <ul>
               <li v-for="(name,index) in names" :key="index">{{ name }}-{{ index }}</li>
           </ul>
       </div>
    </section>

</template>
<script>
export default {
    data () {
        return {
            show:true,
            names: ["lili","huahua","xiaoxiao"]
        }
    }
}
</script>

key方便后期寻找

---

遍历对象

<template>
    <section>
       <div class="list">
           <ul>
                <li v-for="item in user" :key="item.id"> <!--绑定-->
                   <span>{{ item.name }}</span>
                   <span>{{ item.age }}</span>
                </li>
           </ul>
       </div>
    </section>

</template>
<script>
export default {
    data () {
        return {
            show:true,
            user:[
                {
                    id:0,
                    name:'lucy',
                    age:20
                },
                {
                    id:1,
                    name:'mery',
                    age:25
                },
                {
                    id:2,
                    name:'merair',
                    age:10
                },
            ]
        }
    }
}
</script>

每个列表都要添加 key 否则会警报

---

注：项目参考课程编写