动态引入背景图片：background动态传参

最新推荐文章于 2024-08-25 22:59:34 发布

原创最新推荐文章于 2024-08-25 22:59:34 发布 · 1.7k 阅读

1 ·

CC 4.0 BY-SA版权

Html/Css 专栏收录该内容

13 篇文章

订阅专栏

这个博客展示了如何使用Vue组件Fin Carousel创建一个轮播图。内容包括设置轮播高度、禁用箭头、遍历数据列表并根据索引应用不同背景图片。每个轮播项包含标题和内容，通过`title`和`content`函数处理数据。样式部分用Less编写，动态设置背景图片。

<template>
<fin-carousel height="530px" class="carousel" arrow="never">
     <fin-carousel-item
      v-for="(item,index) in templateInfo.templateData.list" :key="index">
      <div :class="['item','banner-bg-'+(index%3+1)]">
        <div class="title">{{title(item.bannerName)}}</div>
        <div class="content">{{content(item.bannerName)}}</div>
      </div>
     </fin-carousel-item>
   </fin-carousel>
</template>
<style lang="less" xcoped>
.banner-bg(@index) {
  background: url(~'./banner-bg@{index}.png') no-repeat;
  background-size: 100% 100%;
}  
</style>