编程 Javascript

vue 动态绑定背景图片的方法

Posted in Javascript onAugust 10, 2018

vue动态绑定背景图片的方法，具体介绍如下所示：

1.backgroundImage && 三目运算符

<div class="right-con" :style="{backgroundImage: 'url(' + (coverImgUrl ? coverImgUrl : baseImg) + ')', backgroundSize:'contain'}">
</div>

1.backgroundImage

<div class="right-con" :style="{backgroundImage: 'url(' + coverImgUrl + ')', backgroundSize:'contain'}">
</div>

下面看下vue如何给v-for循环的标签添加背景图片

v-bind:style="{ 'background-image': 'url(' + item.PlaceImgUrl + ')','background-repeat':'no-repeat','background-size':'cover' }"

总结

以上所述是小编给大家介绍的vue 动态绑定背景图片的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

vue 动态绑定背景图片的方法

- Author -

mrr

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

Javascript 相关文章推荐

javascript下判断一个元素是否存在的代码

Mar 05 Javascript

js,jQuery 排序的实现代码,网页标签排序的实现,标签排序

Apr 27 Javascript

解析js中获得父窗口链接getParent方法以及各种打开窗口的方法

Jun 19 Javascript

js同比例缩放图片的小例子

Oct 30 Javascript

图解js图片轮播效果

Dec 20 Javascript

JS判断是否为JSON对象及是否存在某字段的方法(推荐)

Nov 29 Javascript

零基础轻松学JavaScript闭包

Dec 30 Javascript

微信小程序使用腾讯地图SDK详解及实现步骤

Feb 28 Javascript

vue页面切换到滚动页面显示顶部的实例

Mar 13 Javascript

react高阶组件添加和删除props

Apr 26 Javascript

详解js location.href和window.open的几种用法和区别

Dec 02 Javascript

Element Card 卡片的具体使用

Jul 26 Javascript

原生JS实现$.param() 函数的方法

Aug 10 #Javascript

取消Bootstrap的dropdown-menu点击默认关闭事件方法

Aug 10 #Javascript

JavaScript创建对象的常用方式总结

Aug 10 #Javascript

详解如何在nuxt中添加proxyTable代理

Aug 10 #Javascript

解决bootstrap中下拉菜单点击后不关闭的问题

Aug 10 #Javascript

快速解决bootstrap下拉菜单无法隐藏的问题

Aug 10 #Javascript

详解Vue+axios+Node+express实现文件上传(用户头像上传)

Aug 10 #Javascript

You might like

非常重要的php正则表达式详解

2016/01/04 PHP

js 创建快捷方式的代码(fso)

2010/11/19 Javascript

增强用户体验友好性之jquery easyui window 窗口关闭时的提示

2012/06/22 Javascript

利用JS实现浏览器的title闪烁

2013/07/08 Javascript

深入分析JQuery和JavaScript的异同

2014/10/23 Javascript

Javascript技术栈中的四种依赖注入小结

2016/02/27 Javascript

JS正则表达式修饰符global(/g)用法分析

2016/12/27 Javascript

基于vue循环列表时点击跳转页面的方法

2018/08/31 Javascript

JavaScript中常用的简洁高级技巧总结

2019/03/10 Javascript

vue input标签通用指令校验的实现

2019/11/05 Javascript

[02:41]辉夜杯现场一家三口 “我爸玩风行我玩血魔”

2015/12/27 DOTA

python基础教程之循环介绍

2014/08/29 Python

在Python的web框架中编写创建日志的程序的教程

2015/04/30 Python

让Python代码更快运行的5种方法

2015/06/21 Python

使用Python脚本生成随机IP的简单方法

2015/07/30 Python

Android模拟器无法启动,报错：Cannot set up guest memory ‘android_arm’ Invalid argument的解决方法

2016/07/01 Python

Python IDLE 错误：IDLE''s subprocess didn''t make connection 的解决方案

2017/02/13 Python

Python 互换字典的键值对实例

2019/02/12 Python

Python文件打开方式实例详解【a、a+、r+、w+区别】

2019/03/30 Python

详解python实现交叉验证法与留出法

2019/07/11 Python

python实现动态数组的示例代码

2019/07/15 Python

python3实现elasticsearch批量更新数据

2019/12/03 Python

如何使用python传入不确定个数参数

2020/02/18 Python

python GUI库图形界面开发之PyQt5切换按钮控件QPushButton详细使用方法与实例

2020/02/28 Python

详解CSS3中强大的filter(滤镜)属性

2017/06/29 HTML / CSS

Cocopanda波兰：购买化妆品、护肤品、护发和香水

2020/05/25 全球购物

工程现场管理求职自荐信

2013/10/02 职场文书

中学老师的自我评价

2013/11/07 职场文书

文秘专业毕业生就业推荐信

2013/11/08 职场文书

小学绿色学校申报材料

2014/08/23 职场文书

超市食品安全承诺书

2015/04/29 职场文书

个人借条范本

2015/05/25 职场文书

2015年四年级班主任工作总结

2015/10/22 职场文书

《我的长生果》教学反思

2016/02/20 职场文书

Python爬虫之爬取哔哩哔哩热门视频排行榜

2021/04/28 Python

mysql升级到5.7时,wordpress导数据报错1067的问题

2021/05/27 MySQL