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 相关文章推荐
异步JavaScript编程中的Promise使用方法
Jul 28 Javascript
JavaScript实现的背景自动变色代码
Oct 17 Javascript
node.js抓取并分析网页内容有无特殊内容的js文件
Nov 17 Javascript
AngularJS实现全选反选功能
Dec 08 Javascript
AngularJS 模型详细介绍及实例代码
Jul 27 Javascript
如何学JavaScript?前辈的经验之谈
Dec 28 Javascript
get  post jsonp三种数据交互形式实例详解
Aug 25 Javascript
微信小程序js文件改变参数并在视图上及时更新【推荐】
Jun 11 Javascript
JS计算斐波拉切代码实例
Sep 12 Javascript
基于JavaScript伪随机正态分布代码实例
Nov 07 Javascript
JS桶排序的简单理解与实现方法示例
Nov 25 Javascript
微信小程序实现点击按钮后修改颜色
Dec 05 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显示Facebook的粉丝数量方法
2014/01/08 PHP
JS Array对象入门分析
2008/10/30 Javascript
jQuery 动画基础教程
2008/12/25 Javascript
javascript如何使用bind指定接收者
2014/05/04 Javascript
5个JavaScript经典面试题
2014/10/13 Javascript
JS模拟并美化的表单控件完整实例
2015/08/19 Javascript
jQuery删除节点用法示例(remove方法)
2016/09/08 Javascript
JS实现旋转木马式图片轮播效果
2017/01/18 Javascript
jQuery、zepto、js常用小技巧
2017/02/12 Javascript
Vue自定义指令详解
2017/07/28 Javascript
vue做网页开场视频的实例代码
2017/10/20 Javascript
Vue.js devtool插件安装后无法使用的解决办法
2017/11/27 Javascript
详解angularjs跨页面传参遇到的一些问题
2018/11/01 Javascript
vue动画效果实现方法示例
2019/03/18 Javascript
JavaScript使用ul中li标签实现删除效果
2019/04/15 Javascript
详解vue中移动端自适应方案
2019/05/05 Javascript
Python中的Numpy入门教程
2014/04/26 Python
python+selenium+autoit实现文件上传功能
2017/08/23 Python
Python图像处理实现两幅图像合成一幅图像的方法【测试可用】
2019/01/04 Python
Python如何筛选序列中的元素的方法实现
2019/07/15 Python
Pycharm 文件更改目录后,执行路径未更新的解决方法
2019/07/19 Python
基于Python fminunc 的替代方法
2020/02/29 Python
python实现俄罗斯方块小游戏
2020/04/24 Python
使用keras实现孪生网络中的权值共享教程
2020/06/11 Python
H5页面适配iPhoneX(就是那么简单)
2019/12/02 HTML / CSS
英国顶级珠宝品牌之家:John Greed
2018/06/09 全球购物
Charles&Keith美国官方网站:新加坡快时尚鞋类和配饰零售商
2019/11/27 全球购物
安全资料员岗位职责
2013/12/14 职场文书
群众对十八届四中全会的期盼
2014/10/17 职场文书
离婚财产分配协议书
2014/10/21 职场文书
大国崛起英国观后感
2015/06/02 职场文书
中学政教处工作总结
2015/08/13 职场文书
Python基础之函数嵌套知识总结
2021/05/23 Python
用Python实现一个打字速度测试工具来测试你的手速
2021/05/28 Python
python基础之类方法和静态方法
2021/10/24 Python
浅谈MySql整型索引和字符串索引失效或隐式转换问题
2021/11/20 MySQL