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 相关文章推荐
表单提交验证类
Jul 14 Javascript
ArrayList类(增强版)
Apr 04 Javascript
JavaScipt基本教程之前言
Jan 16 Javascript
利用jQuery 实现GridView异步排序、分页的代码
Feb 06 Javascript
javascript 数据类型转换(parseInt,parseFloat)
Jul 20 Javascript
关于Javascript模块化和命名空间管理的问题说明
Dec 06 Javascript
js获取及判断键盘按键的方法
Dec 01 Javascript
jQuery实现图片走马灯效果的原理分析
Jan 16 Javascript
老生常谈js中0到底是 true 还是 false
Mar 08 Javascript
iOS + node.js使用Socket.IO框架进行实时通信示例
Apr 14 Javascript
手把手带你封装一个vue component第三方库
Feb 14 Javascript
javascript实现放大镜功能
Dec 09 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
星际流派综述
2020/03/04 星际争霸
php for 循环语句使用方法详细说明
2010/05/09 PHP
thinkPHP自动验证机制详解
2016/12/05 PHP
PHP中error_reporting函数用法详细介绍
2017/06/11 PHP
Yii2 如何在modules中添加验证码的方法
2017/06/19 PHP
YUI 读码日记之 YAHOO.util.Dom - Part.1
2008/03/22 Javascript
jquery的ajax请求全面了解
2013/03/20 Javascript
js使浏览器窗口最大化实现代码(适用于IE)
2013/08/07 Javascript
Jquery validation remote 验证的缓存问题解决方法
2014/03/25 Javascript
从零学jquery之如何使用回调函数
2014/05/16 Javascript
javascript实现图片轮播效果
2016/01/20 Javascript
[原创]JS基于FileSaver.js插件实现文件保存功能示例
2016/12/08 Javascript
20行js代码实现的贪吃蛇小游戏
2017/06/20 Javascript
JavaScript基础进阶之数组方法总结(推荐)
2017/09/04 Javascript
浅谈angular2路由预加载策略
2017/10/04 Javascript
JavaScript显式数据类型转换详解
2019/03/18 Javascript
es6中reduce的基本使用方法
2019/09/10 Javascript
VUE+Element实现增删改查的示例源码
2020/11/23 Vue.js
Python collections模块实例讲解
2014/04/07 Python
Python使用分布式锁的代码演示示例
2018/07/30 Python
Django框架使用富文本编辑器Uedit的方法分析
2018/07/31 Python
PyQt5实现五子棋游戏(人机对弈)
2020/03/24 Python
如何基于Python制作有道翻译小工具
2019/12/16 Python
Python如何对齐字符串
2020/07/30 Python
详解Tensorflow不同版本要求与CUDA及CUDNN版本对应关系
2020/08/04 Python
利用HTML5的新特点实现图片文件异步上传
2014/05/29 HTML / CSS
意大利高端时尚买手店:Stefania Mode
2018/03/01 全球购物
英国家居用品和家居装饰品购物网站:Cox & Cox
2019/08/25 全球购物
大三学年自我鉴定范文(3篇)
2014/09/28 职场文书
2014年仓库保管员工作总结
2014/12/03 职场文书
秦始皇兵马俑导游词
2015/02/02 职场文书
全陪导游词开场白
2015/05/29 职场文书
电工生产实习心得体会
2016/01/22 职场文书
2016大学先进团支部事迹材料
2016/03/01 职场文书
2016年九九重阳节活动总结
2016/04/01 职场文书
导游词之苏州阳澄湖
2019/11/15 职场文书