Vue实现快速简洁的轮播图

效果实现流程 

1. 通过element来实现
2.  获取轮播图数据
3. 渲染数据

实现流程

首先在我们的vue项目中通过 npm i element-ui -S 安装Element-ui

然后引入我们引入Element-ui 的 js 和 css 文件即可开始使用

在我们Element-ui中找到Carousel 走马灯，找到我们想要的轮播图

然后找到我们要的效果拿取他的代码 

然后安装Axios来储存我的数据通过指令npm install axios 安装

在我们用的地方，中的Data中创建一个空对象接受我们axios请求的数据

data(){
    return {
        //这是我们创建的空对象
      banner:[],
    }
  },
  mounted(){
      //这里获取我们axios的数据
    getBanner().then(({data})=>{
      // console.log(data);
       //这里把我们axios的数据赋值给我们创建的空对象
      this.banner=data.list
      // console.log(this.banner);
    });
  },

然后在我们template中进行渲染就完成了

<template>
  <div class="home">
    <!-- 轮播 start -->
    <el-carousel :interval="5000" type="card" height="300px">
        //在这里循环我们赋完值得空对象banner 
      <el-carousel-item v-for="item in banner" :key="item.id">
        <!--/detail?menuId=5d83bfba2f7cb93a4009cf98-->
            //拿取我们数据的名字进行渲染
          <img 
            :src="item.product_pic_url"
            width="100%"
            alt=""
          >
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

是不是很简单呀!