<template>
  <div>
    <el-carousel :interval="5000" arrow="always">
      <el-carousel-item :key="item.id" v-for="item in bannerList" :src="item.src">
        <h3>{{ item.title }}</h3>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { getBannerList } from '@/api/banner';

const bannerList = ref([]);

function fetchData() {
  getBannerList().then(res => {
    bannerList.value = res.data;
  }).catch(err => {
    console.log(err);
  });
}

fetchData();

export default {
  bannerList
};
</script>
用element-plus框架插入轮播图组件生成vue3生成vue3格式 script setup代码要求所有方法或箭头函数都用function定义要求所有变量为ref响应式无需任何文字说明只要源码即可

原文地址: https://www.cveoy.top/t/topic/bdTx 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录