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 相关文章推荐
jQuery入门知识简介
Mar 04 Javascript
jQuery 通过事件委派一次绑定多种事件,以减少事件冗余
Jun 30 Javascript
javascript 二进制运算技巧解析
Nov 27 Javascript
鼠标移到图片上变大显示而不是放大镜效果
Jun 15 Javascript
js实现完全自定义可带多级目录的网页鼠标右键菜单方法
Feb 28 Javascript
基于javascript实现图片滑动效果
May 07 Javascript
jQuery Ztree行政地区树状展示(点击加载)
Nov 09 Javascript
简单实现jQuery多选框功能
Jan 09 Javascript
使用vue构建一个上传图片表单
Jul 04 Javascript
vue 2.0 购物车小球抛物线的示例代码
Feb 01 Javascript
微信小程序实现渐入渐出动画效果
Jun 13 Javascript
JQuery样式与属性设置方法分析
Dec 07 jQuery
原生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
《被神捡到的男人》动画化计划进行中!
2020/03/06 日漫
php判断变量类型常用方法
2012/04/24 PHP
在WordPress中实现发送http请求的相关函数解析
2015/12/29 PHP
thinkphp实现分页显示功能
2016/12/03 PHP
PHP 返回数组后处理方法(开户成功后弹窗提示)
2017/07/03 PHP
csdn 博客的css样式 v3
2009/02/24 Javascript
window.showModalDialog参数传递中含有特殊字符的处理方法
2013/06/06 Javascript
js禁止页面复制功能禁用页面右键菜单示例代码
2013/08/29 Javascript
ie8模式下click无反应点击option无反应的解决方法
2014/10/11 Javascript
嵌入式iframe子页面与父页面js通信的方法
2015/01/20 Javascript
AngularJS中$interval的用法详解
2016/02/02 Javascript
jQuery设置聚焦并使光标位置在文字最后的实现方法
2016/08/02 Javascript
微信小程序 倒计时组件实现代码
2016/10/24 Javascript
javascript实现将数字转成千分位的方法小结【5种方式】
2016/12/11 Javascript
使用smartupload组件实现jsp+jdbc上传下载文件实例解析
2017/01/05 Javascript
Angular.JS内置服务$http对数据库的增删改使用教程
2017/05/07 Javascript
inner join 内联与left join 左联的实例代码
2017/09/18 Javascript
JQuery选中select组件被选中的值方法
2018/03/08 jQuery
vue基础之模板和过滤器用法实例分析
2019/03/12 Javascript
vue+web端仿微信网页版聊天室功能
2019/04/30 Javascript
教你30秒发布一个TypeScript包到NPM的方法步骤
2019/07/22 Javascript
详解Vue中的Props与Data细微差别
2020/03/02 Javascript
Python中的模块导入和读取键盘输入的方法
2015/10/16 Python
python networkx 根据图的权重画图实现
2019/07/10 Python
Pandas操作CSV文件的读写实现方法
2019/11/13 Python
html5的websockets全双工通信详解学习示例
2014/02/26 HTML / CSS
美国独家设计师眼镜在线光学商店:Glasses Gallery
2017/12/28 全球购物
将"引用"作为函数返回值类型的格式、好处和需要遵守的规则
2016/02/09 面试题
写给妈妈的道歉信
2014/01/11 职场文书
新郎婚宴答谢词
2014/01/19 职场文书
工商治理实习生的自我评价分享
2014/02/20 职场文书
技校毕业生自荐信范文
2014/03/07 职场文书
生日主持词
2014/03/20 职场文书
家长通知书家长评语
2014/04/17 职场文书
Qt自定义Plot实现曲线绘制的详细过程
2021/11/02 Python
如何使用python包中的sched事件调度器
2022/04/30 Python