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>

效果图:

vue动态绑定背景图片相关推荐

  1. Vue或uniapp 中动态绑定背景图片(三种情况)

    Vue 中动态绑定背景图片(三种情况)_MrQiuGH的博客-CSDN博客_vue 动态背景图

  2. vue 绑定背景图片、图片

    vue 绑定背景图片 最外面的div 样式为  background-repeat:no-repeat;   不填充 <div class="login-container" ...

  3. Vue 设置背景图片样式

    Vue 设置背景图片样式 CSS 效果图 CSS <style> body{background-image: url('./bg.jpg');background-size: cover ...

  4. Vue + element-ui 背景图片设置

    Vue + element-ui 背景图片设置 初学vue 看到其他网址都有些背景图片,于是试着自己也写了一下,表述不好请见谅 实现效果 以下是如何实现: 找到你想要设置背景图片的页面 data里设置 ...

  5. Vue设置背景图片(全屏背景),实际操作与踩雷.

    最近一直困扰我一个背景问题,也是Vue的项目,问题就是在Vue上添加一个好看的背景,每次去网上查的时候,几乎所有插过来的答案都是一样的,我一度怀疑他们理解的背景和我理解的背景是两个东西 网上的答案: ...

  6. Vue 设置背景图片

    代码块 <template><div class="app-container" :style="backgroundDiv" /> & ...

  7. uni-app 动态绑定style background-image uniapp 动态绑定背景图片

    正常不绑定的时候<view class="site" v-for="(item,index) in fieldData" :key="item. ...

  8. Vue 中动态绑定背景图片(三种情况)

    1.服务端返回图片链接 <divclass="bg-img":style="{ backgroundImage: `url(${imgUrl})` }" ...

  9. vue 实现背景图片动态绑定

    在DIV中: v-bind:style="{backgroundImage:'url(' + adMessage.mutativeImage + ')'}" 转载于:https:/ ...

  10. Vue中背景图片无法加载

    遇到过这种情况,调试的时候图片是存在的,能够在style中看到图片的,但是背景就是无法显示.特别奇怪的是如果不是给整个body加background或者对最外层的div的class加backgroun ...

最新文章

  1. asp.net七层架构是指什么
  2. jQuery的JSONP
  3. 【机器学习基础】如何在Python中处理不平衡数据
  4. 控制台浏览器代码实战
  5. C++笔记——malloc基本用法
  6. python如何仿写文章_python,python3.x_求助,用python仿写以下代码,python,python3.x,java - phpStudy...
  7. 信息学奥赛一本通 1043:整数大小比较 | OpenJudge NOI 1.4 05
  8. Accept是又产生一个Socket端口吗?
  9. VS2013 堆栈溢出调查(0xC00000FD: Stack overflow)
  10. 过滤器Filter总结+案例-实现敏感词汇过滤
  11. 乌班图系统部署jdk
  12. matlab 控制声卡,用MATLAB和声卡实现T型波信号发生器的设计方法
  13. 多一份感动,多一份行动[动物园的猪 发表于 2004-11-15]
  14. 计算机大类考研科目,2022考研:计算机专业需要准备哪些科目?
  15. ZZULIOJ1032
  16. DS1819 对应版本的FFMPEG_使用 FFmpeg 对 webp转png , webm转mp4或者gif等进行操作
  17. 51汇编——LCD1602显示
  18. 控制科学与工程(自动化)保研经验【4】——浙大篇
  19. MySQL的InnoDB引擎是如何解决幻读的?
  20. 深圳大学计算机学硕毕业条件,深圳大学硕士研究生奖助体系(2020级)

热门文章

  1. 小福利,制作词云图的第三种方法---stylecloud库,两行代码制作词云图
  2. 马斯克:特朗普都快80了,我支持个年轻的!懂王回怼:忘了当初跪求补贴?...
  3. dede源码详细分析之--全局变量覆盖漏洞的防御
  4. 最大公约数简便算法_三种求最大公约数的方法
  5. 欧几里得算法(求解最大公约数的优质方法)以及原理拓展
  6. 为什么我朋友的移动手机打不开我的网站却能打开www.ip138.com?
  7. Dell服务器组建阵列-Raid(有阵列卡)
  8. shiro身份认证(HelloWorld)
  9. android 新浪微博平台开发之 ——授权登录
  10. Elite教程系列(一):快速上手