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 相关文章推荐
idTabs基于JQuery的根据URL参数选择Tab插件
Apr 11 Javascript
判断文档离浏览器顶部的距离的方法
Jan 08 Javascript
仿淘宝TAB切换搜索框搜索切换的相关内容
Sep 21 Javascript
Jquery搜索父元素操作方法
Feb 10 Javascript
jquery插件之文字间歇自动向上滚动效果代码
Feb 25 Javascript
js实现带农历和八字等信息的日历特效
May 16 Javascript
JS组件系列之使用HTML标签的data属性初始化JS组件
Sep 14 Javascript
JS中with的替代方法与String中的正则方法详解
Dec 23 Javascript
Bootstrap3下拉菜单的实现
Feb 22 Javascript
Vue 中使用 CSS Modules优雅方法
Apr 09 Javascript
nvm、nrm、npm 安装和使用详解(小结)
Jan 17 Javascript
three.js利用卷积法如何实现物体描边效果
Nov 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数据库代码
2009/03/10 PHP
php连接微软MSSQL(sql server)完全攻略
2016/11/27 PHP
yii2实现 &quot;上一篇,下一篇&quot; 功能的代码实例
2017/02/04 PHP
PHP ADODB生成下拉列表框功能示例
2018/05/29 PHP
元素的内联事件处理函数的特殊作用域在各浏览器中存在差异
2011/01/12 Javascript
基于jquery的回到页面顶部按钮
2011/06/27 Javascript
jQuery+html5实现div弹出层并遮罩背景
2015/04/15 Javascript
Web前端新人笔记之jquery入门心得(新手必看)
2016/05/17 Javascript
js判断文件格式及大小的简单实例(必看)
2016/10/11 Javascript
jQuery progressbar通过Ajax请求实现后台进度实时功能
2016/10/11 Javascript
用nodejs搭建websocket服务器
2017/01/23 NodeJs
jquery Form轻松实现文件上传
2017/05/24 jQuery
12条写出高质量JS代码的方法
2018/01/07 Javascript
layui表格checkbox选择全选样式及功能的实例
2018/03/07 Javascript
VUE基于NUXT的SSR 服务端渲染
2018/11/30 Javascript
elementUI Tree 树形控件的官方使用文档
2019/04/25 Javascript
详解微信UnionID作用
2019/05/15 Javascript
Python HTTP客户端自定义Cookie实现实例
2017/04/28 Python
Python日期的加减等操作的示例
2017/08/15 Python
python操作列表的函数使用代码详解
2017/12/28 Python
Python编程pygame模块实现移动的小车示例代码
2018/01/03 Python
matplotlib savefig 保存图片大小的实例
2018/05/24 Python
python微信好友数据分析详解
2018/11/19 Python
logging level级别介绍
2020/02/21 Python
python GUI库图形界面开发之PyQt5菜单栏控件QMenuBar的详细使用方法与实例
2020/02/28 Python
如何用PyPy让你的Python代码运行得更快
2020/12/02 Python
Merrell美国官网:美国登山运动鞋品牌
2018/02/07 全球购物
意大利网上书店:LaFeltrinelli
2020/06/12 全球购物
预备党员思想汇报范文
2014/01/11 职场文书
护理专业学生职业生涯规划范文
2014/03/11 职场文书
学习型班组申报材料
2014/05/31 职场文书
社区维稳工作方案
2014/06/06 职场文书
领导欢迎词范文
2015/01/26 职场文书
大学运动会加油稿
2015/07/22 职场文书
golang interface判断为空nil的实现代码
2021/04/24 Golang
用Python可视化新冠疫情数据
2022/01/18 Python