vue用elemenUI写轮播图

提示:我因为不知道什么原因,swiper安装不上,用的是elementUI的轮播图,在这里做一下记录吧。

当然,首先是安装elementUI,这个去官网看怎么安装就好。这里不多再赘述了。地址在这里:https://element.eleme.cn/#/zh-CN
我用的是vue-cli的,在这里声明一下
如果elementUI安装成功的话,直接在vue文件中写

        <el-carousel class="lunbotu"  :autoplay="false" indicator-position="none" >
          <el-carousel-item>
            <div class="lunbo_img">
              <div class="lunboo" v-for="(item,index) in lunbo" :key="item.id">
              <img :src="item.img" class="tu_img"></img>
              <div class="lunbo_text">{{item.mess}}</div>
              <div class="clear"></div>
              <div class="lunbo_text" style="font-weight:initial;margin-top:5px;">{{item.bofang}}</div>
              </div>
            </div>
          </el-carousel-item>
          <el-carousel-item>
            <div class="lunbo_img">
              <div class="lunboo" v-for="(item,index) in lunbo" :key="item.id">
                  <img :src="item.img" class="tu_img"></img>
              <div class="lunbo_text">{{item.mess}}</div>
              <div class="clear"></div>
              <div class="lunbo_text" style="font-weight:initial;margin-top:5px;">{{item.bofang}}</div>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>

这里的el-carousel是大的框,每一个都是一个轮播的item
在下面的data return中写具体的数据

      items: [{
        id: 1,
        message: '音乐馆'
      },
      {
        id: 2,
        message: '我的音乐'
      },
      {
        id: 3,
        message: '客户端'
      },
      {
        id: 4,
        message: '开放平台'
      },
      {
        id: 5,
        message: 'VIP'
      }
      ],

这样就可以正常工作了

posted @ 2020-12-16 14:21  45的  阅读(696)  评论(0)    收藏  举报