Vue.js学习笔记（一）：双层V-for循环渲染元素之轮播图

v-for：基于源数据多次渲染元素或模板块。此指令之值，必须使用特定语法 alias in expression，为当前遍历的元素提供别名：

<div v-for="item in items">
  {{ item.text }}
</div>

另外也可以为数组索引指定别名 (或者用于对象的键)：

<div v-for="(item, index) in items"></div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, name, index) in object"></div>

（更多介绍请查看官方API文档）

---

效果图：每一个slide里面放三张图片

布局代码

<!--勋章-->
<el-card class="box-card medalBox" >
    <div slot="header" class="clearfix">
        <img src="style/images/icon_15.png"/>
        <span>勋章</span>
        <span>12</span>
    </div>
    <div class="text item">
        <div class="block">
            <el-carousel trigger="hover" height="120px" :autoplay="false">
                <el-carousel-item v-for="(item,index) in bannerList" ><!--循环轮播图页数-->
                    <img :src="childrenItem" v-for="(childrenItem,childrenIndex) of  item.bannerImg"/><!--循环图片数量-->
                </el-carousel-item>
            </el-carousel>
        </div>
    </div>
</el-card>
<!--勋章-->

在Vue实例 data里面定义图片的数组

   bannerList:[
                { bannerImg:['style/images/achievement_1.png','style/images/achievement_2.png','style/images/achievement_3.png']},
                { bannerImg:['style/images/achievement_1.png','style/images/achievement_2.png','style/images/achievement_3.png']},
                { bannerImg:['style/images/achievement_1.png','style/images/achievement_2.png','style/images/achievement_3.png']}
            ]

本文章仅为记录学习所用，如有更好的建议或想法欢迎评论交流~