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 i
·
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>
更多推荐
已为社区贡献1条内容
所有评论(0)