使用Vue 结合Element UI实现图片轮播

使用Vue 结合Element UI实现图片轮播

先安装Element UI，再Main.js里面引入Element UI

import elementUi from 'element-ui'
import  'element-ui/lib/theme-chalk/index.css'  //Element UI样式
Vue.use(elementUi)

在app.vue

<template>
    <div class='Imgroll'>
      <el-carousel indicator-position="outside">
        <el-carousel-item v-for="(item,index) in imgUrls" :key="index">
          <img ref='img' :src="item.imageUrl" />
        </el-carousel-item>
      </el-carousel>
    </div>
</template>
<script>
export default {
    data(){
        return{
            imgUrls:[]
        }
    },
    mounted(){
      this.getImages();
    },
    methods:{
      getImages() {
        this.getImgUrl().then(res => {
          this.imgUrls = res
        })
      },

      // 数据请