编程 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 oop开发滑动(slide)菜单控件

Aug 25 Javascript

jquery如何实现在加载完iframe的内容后再进行操作

Sep 10 Javascript

使用变量动态设置js的属性名

Oct 19 Javascript

JavaScript AOP编程实例

Jun 16 Javascript

JavaScript中模拟实现jsonp

Jun 19 Javascript

JavaScript入门基础

Aug 12 Javascript

jQuery实现动态表单验证时文本框抖动效果完整实例

Aug 21 Javascript

jQuery EasyUI之验证框validatebox实例详解

Apr 10 jQuery

vue构建动态表单的方法示例

Sep 22 Javascript

JavaScript模板引擎原理与用法详解

Dec 24 Javascript

ES6知识点整理之模块化的应用详解

Apr 15 Javascript

Vue使用Three.js加载glTF模型的方法详解

Jun 14 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调用三种数据库的方法(2)

2006/10/09 PHP

php 遍历数据表数据并列表横向排列的代码

2009/09/05 PHP

PHP验证码类代码( 最新修改,完全定制化! )

2010/12/02 PHP

PHP下打开phpMyAdmin出现403错误的问题解决方法

2013/05/23 PHP

php用正则表达式匹配中文实例详解

2013/11/06 PHP

CI(CodeIgniter)框架中的增删改查操作

2014/06/10 PHP

php多任务程序实例解析

2014/07/19 PHP

js ondocumentready onmouseover onclick onmouseout 样式

2010/07/22 Javascript

JQuery 选择和过滤方法代码总结

2010/11/19 Javascript

提高jQuery性能的十个诀窍

2013/11/14 Javascript

JS实现简洁、全兼容的拖动层实例

2015/05/13 Javascript

异步JavaScript编程中的Promise使用方法

2015/07/28 Javascript

HTML页面定时跳转方法解析（2种任选）

2016/12/22 Javascript

Vue实现双向绑定的方法

2016/12/22 Javascript

canvas滤镜效果实现代码

2017/02/06 Javascript

JS实现数组按升序及降序排列的方法

2017/04/26 Javascript

微信小程序实现添加手机联系人功能示例

2017/11/30 Javascript

JavaScript中的E-mail 地址格式验证

2018/03/28 Javascript

JS计算斐波拉切代码实例

2019/09/12 Javascript

Vue的属性、方法、生命周期实例代码详解

2019/09/17 Javascript

JS如何生成动态列表

2020/09/22 Javascript

[47:43]Alliance vs KG 2019国际邀请赛小组赛 BO2 第一场 8.16

2019/08/18 DOTA

详解在Python和IPython中使用Docker

2015/04/28 Python

Python合并字典键值并去除重复元素的实例

2016/12/18 Python

python anaconda 安装环境变量升级以及特殊库安装的方法

2017/06/21 Python

python仿evething的文件搜索器实例代码

2019/05/13 Python

Python列表(list)所有元素的同一操作解析

2019/08/01 Python

Python爬取视频(其实是一篇福利)过程解析

2019/08/01 Python

Python Django form 组件动态从数据库取choices数据实例

2020/05/19 Python

python脚本和网页有何区别

2020/07/02 Python

台湾团购、宅配和优惠券：17Life

2017/08/14 全球购物

Tomcat的缺省是多少，怎么修改

2014/04/09 面试题

房产公证书范本

2014/04/10 职场文书

毕业留言寄语大全

2014/04/10 职场文书

村容村貌整治方案

2014/05/21 职场文书

mysql函数之截取字符串的实现

2022/08/14 MySQL