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 相关文章推荐
借用Google的Javascript API Loader来加速你的网站
Jan 28 Javascript
浅谈javascript的原型继承
Jul 25 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
Oct 24 Javascript
createTextRange()的使用示例含文本框选中部分文字内容
Feb 24 Javascript
js怎么判断flash swf文件是否加载完毕
Aug 14 Javascript
老司机带你解读jQuery插件开发流程
May 16 Javascript
详细分析Javascript中创建对象的四种方式
Aug 17 Javascript
JS实现方形抽奖效果
Aug 27 Javascript
vue-for循环嵌套操作示例
Jan 28 Javascript
Vue项目中配置pug解析支持
May 10 Javascript
vue3.0中setup使用(两种用法)
Dec 02 Vue.js
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
Apr 11 Vue.js
原生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目录函数实现创建、读取目录教程实例
2011/01/13 PHP
php实现购物车功能(上)
2020/07/23 PHP
ThinkPHP设置禁止百度等搜索引擎转码(简单实用)
2016/02/15 PHP
PHP实现加密文本文件并限制特定页面的存取的效果
2016/10/21 PHP
PHPTree――php快速生成无限级分类
2018/03/30 PHP
非常好的js代码
2006/06/27 Javascript
仿迅雷焦点广告效果(JQuery版)
2008/11/19 Javascript
判断客户端浏览器是否安装了Flash插件的多种方法
2010/08/11 Javascript
JavaScript学习笔记之获取当前目录的实现代码
2010/12/14 Javascript
js中document.write使用过程中的一点疑问解答
2014/03/20 Javascript
PHP+jQuery实现随意拖动层并即时保存拖动位置
2015/04/30 Javascript
Jquery注册事件实现方法
2015/05/18 Javascript
基于dropdown.js实现的两款美观大气的二级导航菜单
2015/09/02 Javascript
JavaScript function函数种类详解
2016/02/22 Javascript
JavaScript中判断数据类型的方法总结
2016/05/24 Javascript
javascript阻止事件冒泡和浏览器的默认行为
2017/01/21 Javascript
JavaScript中splice与slice的区别
2017/05/09 Javascript
常见的浏览器Hack技巧整理
2017/06/29 Javascript
jQuery实现的点击标题文字切换字体效果示例【测试可用】
2018/04/26 jQuery
vue实现跨域的方法分析
2019/05/21 Javascript
vue 父组件中调用子组件函数的方法
2019/06/06 Javascript
基于Vant UI框架实现时间段选择器
2020/12/24 Javascript
Python中逗号的三种作用实例分析
2015/06/08 Python
Python日期的加减等操作的示例
2017/08/15 Python
使用实现pandas读取csv文件指定的前几行
2018/04/20 Python
python实现H2O中的随机森林算法介绍及其项目实战
2019/08/29 Python
用Python去除图像的黑色或白色背景实例
2019/12/12 Python
Python自动巡检H3C交换机实现过程解析
2020/08/14 Python
纯CSS3绘制打火机动画火焰效果
2016/07/18 HTML / CSS
JD Sports芬兰:英国领先的运动鞋和运动服饰零售商
2018/11/16 全球购物
为什么需要版本控制?
2013/08/08 面试题
2014信息公开实施方案
2014/02/22 职场文书
优秀大学生自荐信
2014/06/09 职场文书
汽车转让协议书
2015/01/29 职场文书
工作年限证明范本
2015/06/15 职场文书
Python OpenCV 彩色与灰度图像的转换实现
2021/06/05 Python