在我们使用vue开发的时候   有很多时候我们需要用到背景图

这个时候会直接使用 内联样式 直接把你拿到的数据拼接上去

注意  在vue中直接使用style时 花括号一定别忘记

还有就是你的url一定要加引号拼接

：style = ' { backgroundImage : " url ( " + item.img + " ) " } '

完事！

补充：

好像还可以这样写 <div :style=" 'background-image' : ' url( ' + 内容+' ) ' "></div>

更新一点

当你的style设置背景色得时候是需要加{}得

但是如果是width这种就不用加了

over！

vue 内联样式style中的background的更多相关文章

  1. vue 内联样式style三元表达式（动态绑定样式）

    <span v-bind:style="{'display':config.isHaveSearch ? 'block':'none'}" >动态绑定样式</sp ...

  2. v-bind指令动态绑定class和内联样式style

    动态绑定class—概述 数据绑定(v-bind指令)一个常见需求是操作元素的 class 列表.因为class是元素的一个属性,我们可以用 v-bind 处理它们 我们只需要计算出表达式最终的字符串 ...

  3. Vue 内联样式的数据绑定

    Vue 内联样式的数据绑定 之前学的是数据绑定 class,现在可以将数据绑定到 style 中. <div id="app"> <div v-bind:styl ...

  4. Vue 内联样式

    前置说明 Vue 绑定HTML 全局属性style,可以动态地改变属性值.这里就不讲内联样式的基础了,具体轻查看官网文档 Class 与 Style 绑定. 主要分为以下两个步骤进行: v-bind ...

  5. vue.js中内联样式style三元表达式

    <span v-bind:style="{'display':config.isHaveSearch ? 'block':'none'}" >搜索</span&g ...

  6. Vue.js05：vue内联样式

    对象就是无序键值对的集合 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  7. Vue学习之路第十二篇：为页面元素设置内联样式

    1.有了上一篇的基础,接下来理解内联样式的设置会更简单一点,先看正常的css内联样式: <dvi id="app"> <p style="font-si ...

  8. webpack4对第三方库css，项目全局css和vue内联css文件提取到单独的文件(二十二)

    在讲解提取css之前,我们先看下项目的架构如下结构: ### 目录结构如下: demo1 # 工程名 | |--- dist # 打包后生成的目录文件 | |--- node_modules # 所有 ...

  9. Vue.js style(内联样式)

    Vue.js style(内联样式) 我们可以在 v-bind:style 直接设置样式: <div id="app"> <div v-bind:style=&q ...

随机推荐

  1. 【ZJOI2008】树的统计（树链剖分）

    题面 Description 一棵树上有n个节点,编号分别为1到n,每个节点都有一个权值w.我们将以下面的形式来要求你对这棵树完成一些操作: I. CHANGE u t : 把结点u的权值改为t II ...

  2. HNOI2017 单旋

    题目描述 网址:https://www.luogu.org/problemnew/show/3721 大意: 有一颗单旋Splay(Spaly),以key值为优先度,总共有5个操作. [1] 插入一个 ...

  3. [UVAlive4297]First Knight

    题面在这里 题意 给定一个\(n\times m\)的格网,从\((1,1)\)出发,每一格\((i,j)\)往上下左右移动的概率已经给出,询问到达\((n,m)\)的期望步数 数据范围 \[n,m\ ...

  4. [BZOJ1606] [Usaco2008 Dec] Hay For Sale 购买干草 (dp)

    Description 约翰遭受了重大的损失:蟑螂吃掉了他所有的干草,留下一群饥饿的牛．他乘着容量为C(1≤C≤50000)个单位的马车,去顿因家买一些干草．  顿因有H(1≤H≤5000)包干草,每 ...

  5. 大文件视频断点续传插件resumabel.js，优化上传速度，缩短最后一片等待时长。

    在angular中使用resumable.js遇到的一个问题:大视频上传到99-100%时,此时正在上传最后一片,最后一片的xhr一直是pending状态.原因插件会检查第一片和最后一片的元数据,检测 ...

  6. 【Spring源码分析】非懒加载的单例Bean初始化过程（上篇）

    代码入口 上文[Spring源码分析]Bean加载流程概览,比较详细地分析了Spring上下文加载的代码入口,并且在AbstractApplicationContext的refresh方法中,点出了f ...

  7. golang channel的使用以及调度原理

    golang channel的使用以及调度原理 为了并发的goroutines之间的通讯,golang使用了管道channel. 可以通过一个goroutines向channel发送数据,然后从另一个 ...

  8. Windows下GO的开发环境配置

    本文主要内容如下几点: 下载安装GO 配置多个工作区,第一个默认放第三方包,其他的放项目代码 包管理器godep的安装使用 安装过程中的一些坑(墙) vscode中使用go 1. 下载并安装go 官网 ...

  9. XeLaTeX中文模板

    XeLaTeX对中文的支持很友好,可以直接调用系统已安装字体进行文档的撰写.其中需要引用字体的名字,开始遇到了写问题,经常发现字体未引用,现在大概明白了. 引用字体的时候,如果不加中括号,就需要引用字 ...

  10. Js基本函数 2017-03-20

    自定义函数:  Var  y = xxx (参数) xxx. yyy():表示引用这个类的方法:如document.write() xxx.yyy: 表示引用这个类的属性: 如:atrr.lenth ...