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 实现菜单上下显示附效果图
Nov 21 Javascript
一个仿糯米弹框效果demo
Jul 22 Javascript
Node.js中的事件驱动编程详解
Aug 16 Javascript
编写简单的jQuery提示插件
Dec 21 Javascript
对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解
Apr 11 Javascript
深入理解JS addLoadEvent函数
May 20 Javascript
JavaScript编程中实现对象封装特性的实例讲解
Jun 24 Javascript
js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
Dec 12 Javascript
前端js弹出框组件使用方法
Aug 24 Javascript
jQuery Validate表单验证插件的基本使用方法及功能拓展
Jan 04 Javascript
利用jQuery解析获取JSON数据
Apr 08 jQuery
原生js实现密码输入框值的显示隐藏
Jul 17 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一个名片库程序
2006/10/09 PHP
PHP.ini中配置屏蔽错误信息显示和保存错误日志的例子
2014/05/12 PHP
微信 getAccessToken方法详解及实例
2016/11/23 PHP
php+ajax实现无刷新文件上传功能(ajaxuploadfile)
2018/02/11 PHP
PHP数组遍历的几种常见方式总结
2019/02/15 PHP
Javascript与vbscript数据共享
2007/01/09 Javascript
用YUI做了个标签浏览效果
2007/02/20 Javascript
你必须知道的Javascript知识点之&quot;this指针&quot;的应用
2013/04/23 Javascript
jquery click([data],fn)使用方法实例介绍
2013/07/08 Javascript
Ionic默认的Tabs模板使用实例
2016/08/29 Javascript
JavaScript动态检验密码强度的实现方法
2016/11/09 Javascript
js数组去重的hash方法
2016/12/22 Javascript
JavaScript实现焦点进入文本框内关闭输入法的核心代码
2017/09/20 Javascript
vue组件表单数据回显验证及提交的实例代码
2018/08/30 Javascript
深入理解Puppeteer的入门教程和实践
2019/03/05 Javascript
bootstrap table.js动态填充单元格数据的多种方法
2019/07/18 Javascript
解决vue安装less报错Failed to compile with 1 errors的问题
2020/10/22 Javascript
[03:22]DOTA2超级联赛专访单车:找到属于自己的英雄
2013/06/08 DOTA
python利用paramiko连接远程服务器执行命令的方法
2017/10/16 Python
python 堆和优先队列的使用详解
2019/03/05 Python
对Python获取屏幕截图的4种方法详解
2019/08/27 Python
Centos7下源码安装Python3 及shell 脚本自动安装Python3的教程
2020/03/07 Python
端口镜像是怎么实现的
2014/03/25 面试题
计算机专业个人求职信范例
2013/09/23 职场文书
药物学专业学生的自我评价
2013/10/27 职场文书
高中的自我鉴定
2013/12/16 职场文书
校园学雷锋活动月总结
2014/03/09 职场文书
大学新闻系求职信
2014/06/03 职场文书
园林系毕业生求职信
2014/06/23 职场文书
授权委托书(完整版)
2014/09/10 职场文书
警察群众路线对照检查材料思想汇报
2014/10/01 职场文书
教师调动申请报告
2015/05/18 职场文书
2016拓展训练心得体会范文
2016/01/12 职场文书
新课程改革心得体会
2016/01/22 职场文书
2016年“11.11”光棍节活动总结
2016/04/05 职场文书
错误码NET::ERR_CERT_DATE_INVALID证书已过期解决方法?
2022/07/07 数码科技