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 相关文章推荐
JS中剪贴板兼容性、判断复制成功或失败
Mar 09 Javascript
中文输入法不触发onkeyup事件的解决办法
Jul 09 Javascript
深入分析JSONP跨域的原理
Dec 10 Javascript
js传值后台中文出现乱码的解决方法
Jun 30 Javascript
jQuery插件ajaxFileUpload使用详解
Jan 10 Javascript
使用Xcache缓存器加速PHP网站的配置方法
Apr 22 Javascript
JS简单生成随机数(随机密码)的方法
May 11 Javascript
vue.js父子组件通信动态绑定的实例
Sep 28 Javascript
Vue运用transition实现过渡动画
May 06 Javascript
JavaScript实现单图片上传并预览功能
Sep 30 Javascript
使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解
Jun 10 Javascript
js实现验证码干扰(静态)
Feb 22 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
PL-880隐藏功能
2021/03/01 无线电
php生成EXCEL的东东
2006/10/09 PHP
PHP5中使用PDO连接数据库的方法
2010/08/01 PHP
PHP新手NOTICE错误常见解决方法
2011/12/07 PHP
PHP中使用FFMPEG获取视频缩略图和视频总时长实例
2014/05/04 PHP
经典的解除许多网站无法复制文字的绝招
2006/12/31 Javascript
javascript Demo模态窗口
2009/12/06 Javascript
javascript 判断数组是否已包含了某个元素的函数
2010/05/30 Javascript
javascript学习笔记(八) js内置对象
2012/06/19 Javascript
jquery 面包屑导航 具体实现
2013/06/05 Javascript
JQuery以JSON方式提交数据到服务端示例代码
2014/05/05 Javascript
jQuery学习笔记之Ajax用法实例详解
2015/12/01 Javascript
Bootstrap前端开发案例一
2016/06/17 Javascript
基于WebUploader的文件上传js插件
2016/08/19 Javascript
JS+Canvas实现的俄罗斯方块游戏完整实例
2016/12/12 Javascript
网站申请不到支付宝接口、微信接口,免接口收款实现方式几种解决办法
2016/12/14 Javascript
实例分析Array.from(arr)与[...arr]到底有何不同
2019/04/09 Javascript
Vue项目页面跳转时浏览器窗口上方显示进度条功能
2020/03/26 Javascript
vue2.x 对象劫持的原理实现
2020/04/19 Javascript
vant组件中 dialog的确认按钮的回调事件操作
2020/11/04 Javascript
[07:25]DOTA2-DPC中国联赛2月5日Recap集锦
2021/03/11 DOTA
python OpenCV学习笔记实现二维直方图
2018/02/08 Python
在IPython中进行Python程序执行时间的测量方法
2018/11/01 Python
python按比例随机切分数据的实现
2019/07/11 Python
对python中url参数编码与解码的实例详解
2019/07/25 Python
如何实现Django Rest framework版本控制
2019/07/25 Python
python中图像通道分离与合并实例
2020/01/17 Python
Python操作注册表详细步骤介绍
2020/02/05 Python
150行python代码实现贪吃蛇游戏
2020/04/24 Python
2014单位领导班子四风对照检查材料思想汇报
2014/09/25 职场文书
质量承诺书格式范文
2015/04/28 职场文书
个人原因辞职信模板
2015/05/13 职场文书
企业反腐倡廉心得体会
2015/08/15 职场文书
反腐倡廉心得体会2016
2016/01/13 职场文书
5种方法告诉你如何使JavaScript 代码库更干净
2021/09/15 Javascript
在Docker容器中部署SQL Server
2022/04/11 Servers