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>