vue动态绑定背景图片

最新推荐文章于 2024-05-24 14:07:14 发布

AIU哎呀

最新推荐文章于 2024-05-24 14:07:14 发布

阅读量1w

点赞数 5

分类专栏： vue

本文链接：https://blog.csdn.net/AI_U20/article/details/89381052

版权

vue 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

vue动态绑定背景图片

在这里插入图片描述

html代码：

<html>
	<template>
		<div class="itemBox">
			<div class="item" v-for="(ele,i) in goalList" :key="i" :style="{'backgroundImage': 'url(' + ele.bg + ')'}">
				<div class="mask">
					<h2>{{ele.title}}</h2>
					<div class="line"></div>
					<p>{{ele.text}}</p>
				</div>
			</div>
		</div>
	</tempvlate>
</html>

js代码：

<script>
    export default {
        name: "onlineShopping",
        data(){
            return {
                goalList: [
                    {id: 1,title:'行业数据透视',text:'汇聚用户购物能力、日常行为和区域经济等数据，进行数据处理分析，实现大数据计算、流计算、分布式计算等算法开发，使各行业数据多维价值得以挖掘，解决各行业面临的问题。',bg:require('../../assets/img/product/XSSC-hysj@2x.png')},
                    {id: 2,title:'数字化服务商管理系统',text:'通过城市数据应用场景，对海量数据资源进行采集、 计算、存储、加工，形成标准化的城市的数据资产。 通过对城市业务流的分析和再造，形成城市数据平面 的核心能力层，为服务商、商家、用户提供数据服务 应用进行支撑。',bg:require('../../assets/img/product/XSSC-shuzihua@2x.png')},
                    {id: 3,title:'城市综合数据链',text:'基于全面物联网连接与数字虚拟化技术，通过精准映射 、虚实交互，实现城市级的物理空间与虚拟空间之间虚 实交融、智能操控的映射关系，通过在实体世界以及数 字虚拟空间中记录、仿真、预测各行业对象全生命周期 的运行轨迹，实现系统内信息资源、物质资源的最优化 配置。',bg:require('../../assets/img/product/XSSC-cszh@2x.png')}
                ]
            }
        }
    }
</script>

效果图：

在这里插入图片描述

AIU哎呀

关注

5
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
vue动态绑定背景图片

vue动态绑定背景图片html代码：<html> <template> <div class="itemBox"> <div class="item" v-for="(ele,i) in goalList" :key="i" :style="{'backgroundImage': 'url(' + ele.bg + ')'}"> ...
复制链接

扫一扫