vue 内联样式style中的background用法说明


Posted in Javascript onAugust 05, 2020

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

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

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

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

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

vue 内联样式style中的background用法说明

完事!

补充:

好像还可以这样写

<div :style=" 'background-image' : ' url( ' + 内容+' ) ' "></div>

更新一点

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

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

vue 内联样式style中的background用法说明

over!

知识拓展:vue 在已有的购买列表中(数据库返回的数据)修改商品数量

连续加班一个月 连续通宵三天 到最后还是少了一个功能 心碎

简介:一个生成好的商品列表(数据库返回的数据)

vue 内联样式style中的background用法说明

首先拿到我们需要渲染的数组

vue 内联样式style中的background用法说明

在data中定义

vue 内联样式style中的background用法说明

我是在测试的时候 直接写了两条数据

下面开始点击删除

vue 内联样式style中的background用法说明

点击添加是一样的代码 只不过加号减号的区别

以上这篇vue 内联样式style中的background用法说明就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一个判断抢购时间是否到达的简单的js函数
Jun 23 Javascript
jQuery $命名冲突解决方案汇总
Nov 13 Javascript
Javascript单例模式的介绍和实例
Oct 08 Javascript
JavaScript中匿名函数的递归调用
Jan 22 Javascript
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
Feb 21 Javascript
基于input动态模糊查询的实现方法
Dec 12 Javascript
浅谈webpack4 图片处理汇总
Sep 12 Javascript
微信小程序实现弹出层效果
May 26 Javascript
微信小程序基于Taro的分享图片功能实践详解
Jul 12 Javascript
如何在微信小程序中存setStorage
Dec 13 Javascript
JS实现图片懒加载(lazyload)过程详解
Apr 02 Javascript
vue+elementUI 实现内容区域高度自适应的示例
Sep 26 Javascript
vue flex 布局实现div均分自动换行的示例代码
Aug 05 #Javascript
微信小程序实现上传照片代码实例解析
Aug 04 #Javascript
JavaScript实现烟花绽放动画效果
Aug 04 #Javascript
JS事件循环机制event loop宏任务微任务原理解析
Aug 04 #Javascript
解决vue addRoutes不生效问题
Aug 04 #Javascript
vue 解决addRoutes多次添加路由重复的操作
Aug 04 #Javascript
Vue优化:常见会导致内存泄漏问题及优化详解
Aug 04 #Javascript
You might like
PHP中str_replace函数使用小结
2008/10/11 PHP
php生成SessionID和图片校验码的思路和实现代码
2009/03/10 PHP
Laravel5.1 框架响应基本用法实例分析
2020/01/04 PHP
utf8的编码算法 转载
2006/12/27 Javascript
Javascript模块化编程(一)AMD规范(规范使用模块)
2013/01/17 Javascript
javascript遍历控件实例详细解析
2014/01/10 Javascript
JS输入用户名自动显示邮箱后缀列表的方法
2015/01/27 Javascript
JavaScript实现自动消除按钮功能的方法
2015/08/05 Javascript
freemarker判断对象是否为空的方法
2015/08/13 Javascript
用jQuery.ajaxSetup实现对请求和响应数据的过滤
2016/12/20 Javascript
详解Weex基于Vue2.0开发模板搭建
2017/03/20 Javascript
webpack下实现动态引入文件方法
2018/02/22 Javascript
详解vue的diff算法原理
2018/05/20 Javascript
深入Node TCP模块的理解
2019/03/13 Javascript
浅谈bootstrap layer.open中end的使用方法
2019/09/12 Javascript
使用VScode 插件debugger for chrome 调试react源码的方法
2019/09/13 Javascript
vue 封装 Adminlte3组件的实现
2020/03/18 Javascript
React组件设计模式之组合组件应用实例分析
2020/04/29 Javascript
[58:12]Ti4第二日主赛事败者组 LGD vs iG 3
2014/07/21 DOTA
详解Python当中的字符串和编码
2015/04/25 Python
Python首次安装后运行报错(0xc000007b)的解决方法
2016/10/18 Python
python实现将一个数组逆序输出的方法
2018/06/25 Python
对python中两种列表元素去重函数性能的比较方法
2018/06/29 Python
解决Shell执行python文件,传参空格引起的问题
2018/10/30 Python
Python利用神经网络解决非线性回归问题实例详解
2019/07/19 Python
python Django框架实现web端分页呈现数据
2019/10/31 Python
判断Threading.start新线程是否执行完毕的实例
2020/05/02 Python
HTML5拍照和摄像机功能实战详解
2019/01/24 HTML / CSS
制药工程专业毕业生推荐信
2013/12/24 职场文书
装修协议书范本
2014/04/21 职场文书
水污染治理工程专业求职信
2014/06/14 职场文书
中国文明网向国旗敬礼寄语大全
2014/09/27 职场文书
2015年秋季小学开学典礼主持词
2015/07/16 职场文书
贷款担保书范本
2015/09/22 职场文书
公安纪律作风整顿心得体会
2016/01/23 职场文书
导游词之铁岭象牙山
2019/12/06 职场文书