编程 Javascript

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用法说明就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

vue 内联样式style中的background用法说明

- Author -

我爱张苗苗

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JS 分号引起的一段调试问题

Jun 18 Javascript

JavaScript 图片预览效果推荐

Dec 22 Javascript

浅谈Sticky组件的改进实现

Mar 22 Javascript

AngularJS中的指令全面解析(必看)

May 20 Javascript

AngularJS表达式讲解及示例代码

Aug 16 Javascript

javascript中setAttribute兼容性用法分析

Dec 12 Javascript

vue-router 学习快速入门

Mar 01 Javascript

Node.js 使用递归实现遍历文件夹中所有文件

Sep 18 Javascript

利用Vue2.x开发实现JSON树的方法

Jan 04 Javascript

VuePress 静态网站生成方法步骤

Feb 14 Javascript

原生JS实现动态添加新元素、删除元素方法

May 05 Javascript

详解Vue2.5+迁移至Typescript指南

Aug 01 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 tp验证表单与自动填充函数代码

2012/02/22 PHP

spl_autoload_register与autoload的区别详解

2013/06/03 PHP

phpexcel导入excel数据使用方法实例

2013/12/24 PHP

Zend Framework教程之Zend_Db_Table用法详解

2016/03/21 PHP

jquery 选择器部分整理

2009/10/28 Javascript

jQuery Tools Dateinput使用介绍

2012/07/14 Javascript

JS定时器使用,定时定点,固定时刻,循环执行详解

2016/05/31 Javascript

浅析JavaScript的几种Math函数,random(),ceil(),round(),floor()

2016/12/22 Javascript

JavaScript 动态三角函数实例详解

2017/01/08 Javascript

jQuery实现的简单悬浮层功能完整实例

2017/01/23 Javascript

vue-resource 拦截器（interceptor）的使用详解

2017/07/04 Javascript

详解React native全局变量的使用(跨组件的通信)

2017/09/07 Javascript

在nginx上部署vue项目(history模式)的方法

2017/12/28 Javascript

create-react-app安装出错问题解决方法

2018/09/04 Javascript

如何基于layui的laytpl实现数据绑定的示例代码

2020/04/10 Javascript

[01:51]2014DOTA2国际邀请赛这个赛场没有失败者VGTi5再见

2014/07/23 DOTA

Python如何快速实现分布式任务

2017/07/06 Python

Python3 处理JSON的实例详解

2017/10/29 Python

Python 3.7新功能之dataclass装饰器详解

2018/04/21 Python

Python基于jieba库进行简单分词及词云功能实现方法

2018/06/16 Python

Python监控服务器实用工具psutil使用解析

2019/12/19 Python

Scrapy框架基本命令与settings.py设置

2020/02/06 Python

土木工程实习生自我鉴定

2013/09/19 职场文书

公司合作意向书

2014/04/01 职场文书

销售人员求职信

2014/07/22 职场文书

植物生产学专业求职信

2014/08/08 职场文书

2014党的群众路线教育实践活动学习心得体会

2014/10/31 职场文书

2014工程部年度工作总结

2014/12/17 职场文书

学生评语集锦

2015/01/04 职场文书

追悼会答谢词

2015/01/05 职场文书

开学第一周总结

2015/07/16 职场文书

运动会三级跳加油稿

2015/07/21 职场文书

2015中秋节晚会开场白

2015/07/30 职场文书

小学语文教师竞聘演讲稿范文

2019/08/09 职场文书

redis限流的实际应用

2021/04/24 Redis

浅谈JavaScript浅拷贝和深拷贝

2021/11/07 Javascript