vue 使用el 实现轮播图 active问题

最新推荐文章于 2025-06-11 23:47:39 发布

蒂法洛克

最新推荐文章于 2025-06-11 23:47:39 发布

阅读量627

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

没所谓啦。做人嘛，开心最重要啦！

本文链接：https://blog.csdn.net/inflaRunAs/article/details/105626698

vue 专栏收录该内容

5 篇文章

订阅专栏

本文深入探讨了轮播图组件的实现细节，包括其在网页布局中的应用，以及如何通过Vue.js进行数据绑定和事件监听，使轮播图具备交互性。文章还介绍了如何使用v-for指令动态渲染图片列表，并通过@click事件触发图片点击事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div class="carousel-inner" role="listbox">
    <div  v-for="(banner, index) in bannerList" :key="index" :class="`item ${index === 0 ? 'active' : ''}`">
        <img :src=banner.src :alt=banner.name height="100" width="700" @click="bannerClickFun(banner.name)">
        <div class="carousel-caption"></div>
    </div>
</div>