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 相关文章推荐
免费空间广告万能消除代码
Sep 04 Javascript
jQuery 表单验证扩展(四)
Oct 20 Javascript
Node.js安装教程和NPM包管理器使用详解
Aug 16 Javascript
微信JSSDK上传图片
Aug 23 Javascript
浅谈jquery高级方法描述与应用
Oct 04 Javascript
解决BootStrap Fileinput手机图片上传显示旋转问题
Jun 01 Javascript
ReactNative Image组件使用详解
Aug 07 Javascript
Angular4自制一个市县二级联动组件示例
Nov 21 Javascript
Angular实现可删除并计算总金额的购物车功能示例
Dec 26 Javascript
vue动态路由配置及路由传参的方式
May 23 Javascript
vue父组件给子组件的组件传值provide inject的方法
Oct 23 Javascript
vue3弹出层V3Popup实例详解
Jan 04 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
《雄兵连》系列首部大电影《烈阳天道》:可能是因为期望值太高了
2020/08/18 国漫
PHP脚本数据库功能详解(下)
2006/10/09 PHP
php 类自动载入的方法
2015/06/03 PHP
一份老外写的XMLHttpRequest代码多浏览器支持兼容性
2007/01/11 Javascript
JQuery 无废话系列教程(二) jquery实战篇上
2009/06/23 Javascript
javascript 操作select下拉列表框的一点小经验
2010/03/20 Javascript
基于JQuery制作的产品广告效果
2010/12/08 Javascript
jQuery右键菜单contextMenu使用实例
2011/09/28 Javascript
使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)
2014/05/06 Javascript
js+css实现tab菜单切换效果的方法
2015/01/20 Javascript
ubuntu下安装nodejs以及升级的办法
2015/05/08 NodeJs
jQuery模拟原生态App上拉刷新下拉加载更多页面及原理
2015/08/10 Javascript
jQuery实现简单下拉导航效果
2015/09/07 Javascript
js学习总结_选项卡封装(实例讲解)
2017/07/13 Javascript
详解vue2.0 不同屏幕适配及px与rem转换问题
2018/02/23 Javascript
微信小程序scroll-x失效的完美解决方法
2018/07/18 Javascript
angularjs 动态从后台获取下拉框的值方法
2018/08/13 Javascript
react项目如何使用iconfont的方法步骤
2019/03/13 Javascript
Node.js之readline模块的使用详解
2019/03/25 Javascript
[14:50]2018DOTA2亚洲邀请赛开幕式
2018/04/03 DOTA
[06:59]DOTA2-DPC中国联赛3月7日Recap集锦
2021/03/11 DOTA
python编写弹球游戏的实现代码
2018/03/12 Python
Python简单计算给定某一年的某一天是星期几示例
2018/06/27 Python
python中有关时间日期格式转换问题
2019/12/25 Python
Python&amp;&amp;GDAL实现NDVI的计算方式
2020/01/09 Python
Python连接SQLite数据库并进行增册改查操作方法详解
2020/02/18 Python
AmazeUI 列表的实现示例
2020/08/17 HTML / CSS
一些.net面试题
2014/10/06 面试题
linux面试题参考答案(7)
2014/07/24 面试题
饮料业务员岗位职责
2013/12/15 职场文书
公务员保密承诺书
2014/03/27 职场文书
物流管理专业自荐信
2014/06/23 职场文书
学校会议通知范文
2015/04/15 职场文书
导游带团欢迎词
2015/09/30 职场文书
《自己去吧》教学反思
2016/02/16 职场文书
python游戏开发之pygame实现接球小游戏
2022/04/22 Python