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 相关文章推荐
网站404页面3秒后跳到首页的实例代码
Aug 16 Javascript
浅析用prototype定义自己的方法
Nov 14 Javascript
jquery.form.js用法之清空form的方法
Mar 07 Javascript
js判断登录与否并确定跳转页面的方法
Jan 30 Javascript
transport.js和jquery冲突问题的解决方法
Feb 10 Javascript
JavaScript中textRange对象使用方法小结
Mar 24 Javascript
jquery实现适用于门户站的导航下拉菜单效果代码
Aug 24 Javascript
基于js实现checkbox批量选中操作
Nov 22 Javascript
Angular4编程之表单响应功能示例
Dec 13 Javascript
vue项目中在外部js文件中直接调用vue实例的方法比如说this
Apr 28 Javascript
JavaScript设计模式--简单工厂模式定义与应用案例详解
May 23 Javascript
vue 组件间的通信之子组件向父组件传值的方式
Jul 29 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
android上传图片到PHP的过程详解
2015/08/03 PHP
PHP-FPM 设置多pool及配置文件重写操作示例
2019/10/02 PHP
js cookies 常见网页木马挂马代码 24小时只加载一次
2009/04/13 Javascript
JavaScript中的null和undefined区别介绍
2015/01/01 Javascript
js实现图片漂浮效果的方法
2015/03/02 Javascript
JavaScript实现下拉列表框数据增加、删除、上下排序的方法
2015/08/11 Javascript
javascript 判断两个日期之差的示例代码
2015/09/05 Javascript
javascript跨域总结之window.name实现的跨域数据传输
2015/11/01 Javascript
浅谈js中test()函数在正则中的使用
2016/08/19 Javascript
Vuejs第十三篇之组件——杂项
2016/09/09 Javascript
微信小程序 slider 详解及实例代码
2017/01/10 Javascript
基于JS实现9种不同的面包屑和分布式多步骤导航效果
2017/02/21 Javascript
JS鼠标滚动分页效果示例
2017/07/05 Javascript
for循环 + setTimeout 结合一些示例(前端面试题)
2017/08/30 Javascript
webpack多入口文件页面打包配置详解
2018/01/09 Javascript
在vue项目创建的后初始化首次使用stylus安装方法分享
2018/01/25 Javascript
vue页面更新patch的实现示例
2020/03/25 Javascript
js实现简单五子棋游戏
2020/05/28 Javascript
JavaScript实现滑块验证解锁
2021/01/07 Javascript
手写Vue2.0 数据劫持的示例
2021/03/04 Vue.js
python读取csv文件示例(python操作csv)
2014/03/11 Python
python与sqlite3实现解密chrome cookie实例代码
2018/01/20 Python
python3.4控制用户输入与输出的方法
2018/10/17 Python
Django重置migrations文件的方法步骤
2019/05/01 Python
OpenCV图像颜色反转算法详解
2019/05/13 Python
python取余运算符知识点详解
2019/06/27 Python
python selenium循环登陆网站的实现
2019/11/04 Python
基于python图像处理API的使用示例
2020/04/03 Python
python语言中有算法吗
2020/06/16 Python
基于Python实现体育彩票选号器功能代码实例
2020/09/16 Python
Python paramiko使用方法代码汇总
2020/11/20 Python
别名指示符是什么
2012/10/08 面试题
个人自我鉴定范文
2013/10/04 职场文书
离婚承诺书格式范文
2015/05/04 职场文书
医学会议开幕词
2016/03/03 职场文书
python urllib库的使用详解
2021/04/13 Python