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‘
      }
      ],

这样就可以正常工作了

vue用elemenUI写轮播图

原文：https://www.cnblogs.com/luiai/p/14143639.html