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实现轮显新闻标题链接
Aug 13 Javascript
javascript+css 网页每次加载不同样式的实现方法
Dec 27 Javascript
jquery的map与get方法详解
Nov 04 Javascript
js子页面获取父页面数据示例
May 15 Javascript
JS 在指定数组中随机取出N个不重复的数据
Jun 10 Javascript
在javaScript中检测数据类型的几种方式小结
Mar 04 Javascript
checkbox:click事件触发span元素内容改变的方法
Sep 11 Javascript
详解如何在nuxt中添加proxyTable代理
Aug 10 Javascript
vue-cli3.0 环境变量与模式配置方法
Nov 08 Javascript
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 jQuery
node.js微信小程序配置消息推送的实现
Feb 13 Javascript
vue keep-alive 动态删除组件缓存的例子
Nov 04 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 日期和时间的处理-郑阿奇(续)
2011/07/04 PHP
PHP 透明水印生成代码
2012/08/27 PHP
ThinkPHP实现登录退出功能
2017/06/29 PHP
PHP基于关联数组20行代码搞定约瑟夫问题示例
2017/11/07 PHP
use jscript with List Proxy Server Information
2007/06/11 Javascript
详谈jQuery中的this和$(this)
2014/11/13 Javascript
jQuery中大家不太了解的几个方法
2015/03/04 Javascript
详解JavaScript对象类型
2016/06/16 Javascript
js实现table添加行tr、删除行tr、清空行tr的简单实例
2016/10/15 Javascript
微信小程序 Windows2008 R2服务器配置TLS1.2方法
2016/12/05 Javascript
vue 使某个组件不被 keep-alive 缓存的方法
2018/09/21 Javascript
vue + element-ui的分页问题实现
2018/12/17 Javascript
vue element动态渲染、移除表单并添加验证的实现
2019/01/16 Javascript
微信小程序地图导航功能实现完整源代码附效果图(推荐)
2019/04/28 Javascript
layui实现把数据表格时间戳转换为时间格式的例子
2019/09/12 Javascript
Vue替代marquee标签超出宽度文字横向滚动效果
2019/12/09 Javascript
Javascript生成器(Generator)的介绍与使用
2021/01/31 Javascript
[01:33]完美世界DOTA2联赛PWL S3 集锦第二期
2020/12/21 DOTA
Python读取环境变量的方法和自定义类分享
2014/11/22 Python
Python程序中使用SQLAlchemy时出现乱码的解决方案
2015/04/24 Python
Python实现求笛卡尔乘积的方法
2017/09/16 Python
pandas 快速处理 date_time 日期格式方法
2018/11/12 Python
人工神经网络算法知识点总结
2019/06/11 Python
什么是python的自省
2020/06/21 Python
总结python 三种常见的内存泄漏场景
2020/11/20 Python
美国一家著名的儿童鞋制造商:Stride Rite
2017/01/02 全球购物
时装界的“朋克之母”:Vivienne Westwood
2017/07/06 全球购物
WiFi云数码相框:Nixplay
2018/07/05 全球购物
linux比较文件内容的命令是什么
2015/09/23 面试题
成语的广告词
2014/03/19 职场文书
幼儿园大班开学教师寄语
2014/04/03 职场文书
实习评语大全
2014/04/26 职场文书
信息员培训方案
2014/06/12 职场文书
2014年计划生育工作总结
2014/11/14 职场文书
2015年女职工工作总结
2015/05/15 职场文书
如何利用opencv判断两张图片是否相同详解
2021/07/07 Python