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

 

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

  {{ item.text }}

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

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

---

 

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

布局代码

    

        
        勋章
        12
    
    

        

            
                
                    
                
            
        
    

在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']}
            ]

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