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实现视频播放页面的关灯开灯效果
May 27 Javascript
使用非html5实现js板连连看游戏示例代码
Sep 22 Javascript
javascript计算星座属相(十二生肖属相)示例代码
Jan 09 Javascript
javascript事件冒泡详解和捕获、阻止方法
Apr 12 Javascript
jQuery获取父元素及父节点的方法小结
Apr 14 Javascript
Jquery基础之事件操作详解
Jun 14 Javascript
JS实现简单的天数计算器完整实例
Apr 28 Javascript
Node.js中Bootstrap-table的两种分页的实现方法
Sep 18 Javascript
node.js中 mysql 增删改查操作及async,await处理实例分析
Feb 11 Javascript
Node.js API详解之 Error模块用法实例分析
May 14 Javascript
详解vue3.0 的 Composition API 的一种使用方法
Oct 26 Javascript
javascript实现倒计时关闭广告
Feb 09 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
PHP 开发环境配置(测试开发环境)
2010/04/28 PHP
PHP数据类型的总结分析
2013/06/13 PHP
使用PHPExcel导出Excel表
2018/09/08 PHP
用javascript获得地址栏参数的两种方法
2006/11/08 Javascript
用js实现的仿sohu博客更换页面风格(简单版)
2007/03/22 Javascript
Iframe 自动适应页面的高度示例代码
2014/02/26 Javascript
jQuery根据ID获取input、checkbox、radio、select的示例
2014/08/11 Javascript
jQuery学习笔记之jQuery+CSS3的浏览器兼容性
2015/01/19 Javascript
js获取checkbox值的方法
2015/01/28 Javascript
浅谈JS中json数据的处理
2016/06/30 Javascript
AngularJS使用ng-Cloak阻止初始化闪烁问题的方法
2016/11/03 Javascript
AngularJS基于ui-route实现深层路由的方法【路由嵌套】
2016/12/14 Javascript
Angular.js项目中使用gulp实现自动化构建以及压缩打包详解
2017/07/19 Javascript
Angular4 中内置指令的基本用法
2017/07/31 Javascript
Angular CLI 安装和使用教程
2017/09/13 Javascript
Vue验证码60秒倒计时功能简单实例代码
2018/06/22 Javascript
10行代码实现微信小程序滑动tab切换
2018/12/28 Javascript
微信小程序自定义导航栏实例代码
2019/04/05 Javascript
通过Nodejs搭建网站简单实现注册登录流程
2019/06/14 NodeJs
JavaScript中如何对多维数组(矩阵)去重的实现
2019/12/04 Javascript
Openlayers实现点闪烁扩散效果
2020/09/24 Javascript
[00:58]PWL开团时刻DAY5——十人开雾0换5
2020/11/04 DOTA
Python tempfile模块学习笔记(临时文件)
2014/05/25 Python
在Python中操作字典之clear()方法的使用
2015/05/21 Python
Python实现基于多线程、多用户的FTP服务器与客户端功能完整实例
2017/08/18 Python
Python实现繁体中文与简体中文相互转换的方法示例
2018/12/18 Python
django admin组件使用方法详解
2019/07/19 Python
Django中ajax发送post请求 报403错误CSRF验证失败解决方案
2019/08/13 Python
澳大利亚UGG工厂直销:Australian Ugg Boots
2017/10/14 全球购物
澳大利亚实惠时尚女装商店:Katies
2019/06/16 全球购物
我看到了用指针调用函数的不同语法形式
2014/07/16 面试题
《金子》教学反思
2014/04/13 职场文书
大学生个人先进事迹材料范文
2014/05/03 职场文书
质检员岗位职责
2015/02/03 职场文书
MySQL中IF()、IFNULL()、NULLIF()、ISNULL()函数的使用详解
2021/06/26 MySQL
python基础之错误和异常处理
2021/10/24 Python