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 动态绑定背景图片的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
深入聊聊Array的sort方法的使用技巧.详细点评protype.js中的sortBy方法
Apr 12 Javascript
jQuery源码分析-05异步队列 Deferred 使用介绍
Nov 14 Javascript
javascript小组件 原生table排序表格脚本(兼容ie firefox opera chrome)
Jul 25 Javascript
jQuery随机切换图片的小例子
Apr 18 Javascript
分享一个自己动手写的jQuery分页插件
Aug 28 Javascript
js获取checkbox值的方法
Jan 28 Javascript
javascript常用函数(1)
Nov 04 Javascript
js倒计时抢购实例
Dec 20 Javascript
js实现的万能flv网页播放器代码
Apr 30 Javascript
JavaScript中的prototype原型学习指南
May 09 Javascript
React-Native中props具体使用详解
Sep 04 Javascript
如何实现js拖拽效果及原理解析
May 08 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
IStream与TStream之间的相互转换
2008/08/01 PHP
php实现基于pdo的事务处理方法示例
2017/07/21 PHP
PDO操作MySQL的基础教程(推荐)
2017/08/18 PHP
PHP chunk_split()函数讲解
2019/02/12 PHP
第一个JavaScript入门基础 document.write输出
2010/02/22 Javascript
javascript类型转换示例
2014/04/29 Javascript
如何用JS判断两个数字的大小
2016/07/21 Javascript
Angular 中 select指令用法详解
2016/09/29 Javascript
JS 滚动事件window.onscroll与position:fixed写兼容IE6的回到顶部组件
2016/10/10 Javascript
微信开发 js实现tabs选项卡效果
2016/10/28 Javascript
Node.js中路径处理模块path详解
2016/11/14 Javascript
jQuery实现的手风琴侧边菜单效果
2017/03/29 jQuery
Bootstrap 模态框多次显示后台提交多次BUG的解决方法
2017/12/26 Javascript
Bootstrap实现可折叠分组侧边导航菜单
2018/03/07 Javascript
JavaScript实现点击出现图片并统计点击次数功能示例
2018/07/23 Javascript
详解关于Angular4 ng-zorro使用过程中遇到的问题
2018/12/05 Javascript
vue 查看dist文件里的结构(多种方式)
2020/01/17 Javascript
Ubuntu下创建虚拟独立的Python环境全过程
2017/02/10 Python
Python装饰器的执行过程实例分析
2018/06/04 Python
python检测空间储存剩余大小和指定文件夹内存占用的实例
2018/06/11 Python
python+selenium打印当前页面的titl和url方法
2018/06/22 Python
python 返回一个列表中第二大的数方法
2019/07/09 Python
Python中的引用和拷贝实例解析
2019/11/14 Python
详解Python Opencv和PIL读取图像文件的差别
2019/12/27 Python
解决Python Matplotlib绘图数据点位置错乱问题
2020/05/16 Python
Python venv虚拟环境配置过程解析
2020/07/08 Python
Python importlib模块重载使用方法详解
2020/10/13 Python
python进行二次方程式计算的实例讲解
2020/12/06 Python
html5 css3网站菜单实现代码
2013/12/23 HTML / CSS
瑞典廉价机票预订网站:Seat24
2018/06/19 全球购物
顶撞领导检讨书
2014/01/29 职场文书
运动会方阵解说词
2014/02/12 职场文书
3.12植树节活动总结2014
2014/03/13 职场文书
2014年计生工作总结
2014/11/21 职场文书
2015学校年度工作总结
2015/05/11 职场文书
JVM钩子函数的使用场景详解
2021/08/23 Java/Android