VUE + ELEMENT UI 实现简单轮播图效果

VUE + ELEMENT UI 实现简单轮播图效果

遍历imgArray数组得到item，绑定到img标签中的src属性中，:src可以用v-bind:src，class是设置图片的样式，可以不写。

<template>
  <el-carousel indicator-position="outside">
    <el-carousel-item v-for="item in imgArray">
      <img :src="item" class="rightImg">
    </el-carousel-item>
  </el-carousel>
</template>

这里再script中设置数组,需要用到require关键字，这个require我也不确定，看网上说的是本地图片路径放到data中需要加require

<script>
export default {
  name: "XXXXXXX",
  data() {
    return {
      imgArray: [
        require('../assets/1.jpg'),
        require('../assets/2.jpg'),
        require('../assets/3.jpg')
      ]
    }
  }
}
</script>

<style scoped>
.rightImg {
  width: 960px;
  height: 540px;
}
</style>