vue 动态引用背景图片

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

小达不溜儿

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

阅读量247

点赞数

分类专栏： Vue Html/Css

本文链接：https://blog.csdn.net/liuhp123/article/details/115086449

版权

Vue 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

Html/Css

13 篇文章 0 订阅

订阅专栏

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

摘要由CSDN通过智能技术生成

<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>