vue 动态引用背景图片

最新推荐文章于 2024-08-30 17:33:11 发布

小达不溜儿

最新推荐文章于 2024-08-30 17:33:11 发布

阅读量275

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue Html/Css

本文链接：https://blog.youkuaiyun.com/liuhp123/article/details/115086449

Vue 同时被 2 个专栏收录

17 篇文章

订阅专栏

Html/Css

13 篇文章

订阅专栏

这是一个基于Vue的模板示例，展示了如何根据索引设置不同的背景图片，并且包含标题和内容的显示。当存在链接时，提供了一个查看详情的按钮，点击会触发打开链接的操作。该组件适用于构建具有动态内容的Banner区域。

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

<template>
	<div :class="['item','banner-bg-'+(index%3+1)]">
        <div class="title">{{title(item.bannerName)}}</div>
        <div class="content">{{content(item.bannerName)}}</div>
        <div v-if="item.bannerUrl" 	@click="openUrl(item.bannerUrl)" class="btn">查看详情</div>
    </div>
</template>
<style lang="less">
.banner-bg(@index) {
  background: url(~'./banner@{index}.png') no-repeat;
  background-size: 100% 100%;
}
<style>