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 相关文章推荐
在textarea中屏蔽js的某个function的javascript代码
Apr 20 Javascript
iis6+javascript Add an Extension File
Jun 13 Javascript
CSS+Jquery实现页面圆角框方法大全
Dec 24 Javascript
js escape,unescape解决中文乱码问题的方法
May 26 Javascript
js判断鼠标左、中、右键哪个被点击的方法
Jan 27 Javascript
JS中Location使用详解
May 12 Javascript
jQuery实现点击按钮弹出可关闭层的浮动层插件
Sep 19 Javascript
全面解析多种Bootstrap图片轮播效果
May 27 Javascript
js随机生成一个验证码
Jun 01 Javascript
JS正则表达式完美实现身份证校验功能
Oct 18 Javascript
js和jQuery以及easyui实现对下拉框的指定赋值方法
Jan 23 jQuery
JavaScript中变量提升和函数提升的详解
Aug 07 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
Apache2 httpd.conf 中文版
2006/11/17 PHP
PHP实现求解最长公共子串问题的方法
2017/11/17 PHP
jquery 中多条件选择器,相对选择器,层次选择器的区别
2012/07/03 Javascript
JavaScript中的apply()方法和call()方法使用介绍
2012/07/25 Javascript
jquery插件珍藏(图片局部放大/信息提示框)
2013/01/08 Javascript
JS中的substring和substr函数的区别说明
2013/05/07 Javascript
Javascript学习笔记之 函数篇(三) : 闭包和引用
2014/11/23 Javascript
轻松实现jquery手风琴效果
2016/01/14 Javascript
基于JavaScript实现智能右键菜单
2016/03/02 Javascript
使用jquery提交form表单并自定义action的实现代码
2016/05/25 Javascript
javascript简单进制转换实现方法
2016/11/24 Javascript
js 单引号替换成双引号,双引号替换成单引号的实现方法
2017/02/16 Javascript
jQuery模拟下拉框选择对应菜单的内容
2017/03/07 Javascript
微信小程序中多个页面传参通信的学习与实践
2017/05/05 Javascript
微信小程序实现多个按钮toggle功能的实例
2017/06/13 Javascript
JavaScript之filter_动力节点Java学院整理
2017/06/28 Javascript
bootstrap Table插件使用demo
2017/08/07 Javascript
详解Angular-ui-BootStrap组件的解释以及使用
2018/07/13 Javascript
[01:28:24]NAVI vs VG Supermajor 败者组 BO3 第三场 6.5
2018/06/06 DOTA
Python中return语句用法实例分析
2015/08/04 Python
Python爬虫抓取手机APP的传输数据
2016/01/22 Python
Flask框架的学习指南之制作简单blog系统
2016/11/20 Python
python使用正则表达式替换匹配成功的组并输出替换的次数
2017/11/22 Python
Python(Django)项目与Apache的管理交互的方法
2018/05/16 Python
Python中flatten( )函数及函数用法详解
2018/11/02 Python
python字符串,元组,列表,字典互转代码实例详解
2020/02/14 Python
解决django FileFIELD的编码问题
2020/03/30 Python
构建高效的python requests长连接池详解
2020/05/02 Python
英国时尚泳装品牌:Maru Swimwear
2019/10/06 全球购物
幼儿园毕业典礼主持词
2014/03/21 职场文书
《沉香救母》教学反思
2014/04/19 职场文书
初中毕业生自我评价
2015/03/02 职场文书
2015年党风建设工作总结
2015/04/29 职场文书
专项资金申请报告
2015/05/15 职场文书
2019入党申请书格式和范文
2019/06/25 职场文书
TensorFlow中tf.batch_matmul()的用法
2021/06/02 Python