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 剧场版 你必须知道的javascript
May 27 Javascript
IE和firefox浏览器的event事件兼容性汇总
Dec 06 Javascript
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
Jan 25 Javascript
浅谈javascript的call()、apply()、bind()的用法
Feb 21 Javascript
js每隔两秒输出数组中的一项(实例)
May 28 Javascript
利用Node.js了解与测量HTTP所花费的时间详解
Sep 22 Javascript
浅谈Vue路由快照实现思路及其问题
Jun 07 Javascript
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
Aug 20 Javascript
element ui table(表格)实现点击一行展开功能
Dec 04 Javascript
Jquery的Ajax技术使用方法
Jan 21 jQuery
vue实现将一个数组内的相同数据进行合并
Nov 07 Javascript
Vue将props值实时传递 并可修改的操作
Aug 09 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
编写漂亮的代码 - 将后台程序与前端程序分开
2008/04/23 PHP
php将时间差转换为字符串提示
2011/09/07 PHP
解析php中die(),exit(),return的区别
2013/06/20 PHP
php中利用str_pad函数生成数字递增形式的产品编号
2013/09/30 PHP
Laravel搭建后台登录系统步骤详解
2016/07/26 PHP
摘自百度的图片轮换效果代码
2007/11/19 Javascript
Tips 带三角可关闭的文字提示
2010/10/06 Javascript
基于Jquery的动态创建DOM元素的代码
2010/12/28 Javascript
JQuery Highcharts 动态生成图表的方法
2013/11/15 Javascript
js中document.write的那点事
2014/12/12 Javascript
JavaScript中实现Map的示例代码
2015/09/09 Javascript
JavaScript DOM节点操作方法总结
2016/08/23 Javascript
JS+html5 canvas实现的简单绘制折线图效果示例
2017/03/13 Javascript
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
2017/05/01 jQuery
JS如何设置元素样式的方法示例
2017/08/28 Javascript
解决vue 打包发布去#和页面空白的问题
2018/09/04 Javascript
JavaScript作用域链实例详解
2019/01/21 Javascript
微信小程序实现列表滚动头部吸顶的示例代码
2020/07/12 Javascript
理解Python中的类与实例
2015/04/27 Python
简单上手Python中装饰器的使用
2015/07/12 Python
Python实现基于二叉树存储结构的堆排序算法示例
2017/12/08 Python
Win7 64位下python3.6.5安装配置图文教程
2020/10/27 Python
python GUI库图形界面开发之PyQt5访问系统剪切板QClipboard类详细使用方法与实例
2020/02/27 Python
Python可视化工具如何实现动态图表
2020/10/23 Python
html5使用canvas压缩图片的示例代码
2018/09/11 HTML / CSS
英国蛋糕装饰用品一站式商店:Craft Company
2019/03/18 全球购物
行政经理的岗位职责
2013/11/23 职场文书
幼儿园大班家长评语
2014/04/17 职场文书
市场开发与营销专业求职信范文
2014/05/01 职场文书
工作说明书范文
2014/05/07 职场文书
微笑面对生活演讲稿
2014/05/13 职场文书
党员承诺书范文2015
2015/04/27 职场文书
欠款纠纷起诉状
2015/05/19 职场文书
九年级历史教学反思
2016/02/19 职场文书
Python如何利用正则表达式爬取网页信息及图片
2021/04/17 Python
一文搞懂redux在react中的初步用法
2021/06/09 Javascript