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 相关文章推荐
基于jquery的下拉框改变动态添加和删除表格实现代码
Sep 12 Javascript
了不起的node.js读书笔记之node.js中的特性
Dec 22 Javascript
bootstrap table 服务器端分页例子分享
Feb 10 Javascript
JS+CSS实现的日本门户网站经典选项卡导航效果
Sep 27 Javascript
JavaScript实现数据类型的相互转换
Mar 06 Javascript
浅析jQuery中使用$所引发的问题
May 29 Javascript
Json解析的方法小结
Jun 22 Javascript
如何检测JavaScript的各种类型
Jul 30 Javascript
详解JS中的attribute属性
Apr 25 Javascript
bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据
Aug 09 Javascript
webpack打包js文件及部署的实现方法
Dec 18 Javascript
关于ligerui子页面关闭后,父页面刷新,重新加载的方法
Sep 27 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 MySQL与分页效率
2008/06/04 PHP
利用PHP制作简单的内容采集器的原理分析
2008/10/01 PHP
基于jquery实现状态限定编辑的代码
2012/02/11 Javascript
图片动画横条广告带上下滚动可自定义图片、链接等等
2013/10/20 Javascript
js 判断控件获得焦点的示例代码
2014/03/04 Javascript
JavaScript跨域方法汇总
2014/10/16 Javascript
js实现有过渡渐变效果的图片轮播相册(兼容IE,ff)
2016/01/19 Javascript
JavaScript DOM节点操作实例小结(新建,删除HTML元素)
2017/01/19 Javascript
利用n 升级工具升级Node.js版本及在mac环境下的坑
2017/02/15 Javascript
原生Aajax 和jQuery Ajax 写法个人总结
2017/03/24 jQuery
Kindeditor单独调用多图上传实例
2017/07/31 Javascript
在Vuex使用dispatch和commit来调用mutations的区别详解
2018/09/18 Javascript
详解webpack打包nodejs项目(前端代码)
2018/09/19 NodeJs
javascript获取元素的计算样式
2019/05/24 Javascript
js图数据结构处理 迪杰斯特拉算法代码实例
2019/09/11 Javascript
vue实现移动端省市区选择
2019/09/27 Javascript
vue style width a href动态拼接问题的解决
2020/08/07 Javascript
vue-openlayers实现地图坐标弹框效果
2020/09/24 Javascript
布同自制Python函数帮助查询小工具
2011/03/13 Python
Python使用urllib2模块抓取HTML页面资源的实例分享
2016/05/03 Python
python爬取51job中hr的邮箱
2016/05/14 Python
Python内置数据结构与操作符的练习题集锦
2016/07/01 Python
Python简单计算数组元素平均值的方法示例
2017/12/26 Python
python机器学习理论与实战(五)支持向量机
2018/01/19 Python
python实现简单遗传算法
2018/03/19 Python
对python中矩阵相加函数sum()的使用详解
2019/01/28 Python
TensorFlow基于MNIST数据集实现车牌识别(初步演示版)
2019/08/05 Python
Python全局锁中如何合理运用多线程(多进程)
2019/11/06 Python
Python数组拼接np.concatenate实现过程
2020/04/18 Python
Manjaro、pip、conda更换国内源的方法
2020/11/17 Python
详解CSS3 Media Queries中媒体属性的使用
2016/02/29 HTML / CSS
DC Shoes澳大利亚官方网上商店:购买DC鞋子
2019/10/25 全球购物
销售实习自我鉴定
2013/12/07 职场文书
作风建设剖析材料
2014/10/06 职场文书
入党介绍人考察意见
2015/06/01 职场文书
2015年除四害工作总结
2015/07/23 职场文书