参考网址element-plus 使用 el-carousel 跑马灯默认第一页不显示_前端老实人的博客-CSDN博客_element plus 走马灯关键代码 :在data里面定义一个初始化数据即可,里面要有长度
banner: [{}],
<template>
<div class="content__wrap">
<div class="swiper">
<el-carousel height="420px">
<el-carousel-item v-for="item in banner" :key="item.id">
<img :src="item.img" />
</el-carousel-item>
</el-carousel>
</div>
<div class="recentUpdate"></div>
</div>
</template>
<script>
import { reactive, toRefs, defineComponent, onBeforeMount } from "vue";
import { getBanner } from "@/api/tool.js";
export default defineComponent({
name: "Index",
components: {},
methods: {},
setup() {
const state = reactive({
banner: [{}],
});
onBeforeMount(() => {
fetchData();
console.log("...");
});
const fetchData = async () => {
const data = await getBanner();
state.banner = data;
};
return {
...toRefs(state),
fetchData,
};
},
});
</script>
<style lang="scss" scoped>
.content__wrap {
background: #ffffff;
margin: 20px 20px 0 20px;
padding: 40px 20px 40px 20px;
}
.title {
font-size: 16px;
color: #333333;
font-weight: 600;
padding-bottom: 16px;
}
.swiper {
max-width: 1028px;
img {
width: 100%;
height: 100%;
}
}
.demonstration {
color: var(--el-text-color-secondary);
}
.el-carousel__item h3 {
color: #475669;
opacity: 0.75;
line-height: 150px;
margin: 0;
text-align: center;
}
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n + 1) {
background-color: #d3dce6;
}
</style>