编程 Javascript

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 动态绑定背景图片的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

vue 动态绑定背景图片的方法

- Author -

mrr

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

js 效率组装字符串 StringBuffer

Dec 23 Javascript

js 父窗口控制子窗口的行为-打开，关闭，重定位，回复

Apr 20 Javascript

JavaScript定时器和优化的取消定时器方法

Jul 03 Javascript

jQuery的position()方法详解

Jul 19 Javascript

非常实用的12个jquery代码片段

Nov 02 Javascript

客户端验证用户名和密码的方法详解

Jun 16 Javascript

js移动焦点到最后位置的简单方法

Nov 25 Javascript

小程序实现多选框功能

Oct 30 Javascript

微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能

Jul 20 Javascript

vue 开发之路由配置方法详解

Dec 02 Javascript

Vue.js中的高级面试题及答案

Jan 13 Javascript

JS 基本概念详细介绍

Oct 16 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防CC攻击实现代码

2011/12/29 PHP

php 数组动态添加实现代码(最土团购系统的价格排序)

2011/12/30 PHP

php stripslashes和addslashes的区别

2014/02/03 PHP

PHP中使用FFMPEG获取视频缩略图和视频总时长实例

2014/05/04 PHP

php抽象方法和普通方法的区别点总结

2019/10/13 PHP

Jquery插件编写简明教程

2014/03/25 Javascript

ExtJS4 表格的嵌套 rowExpander应用

2014/05/02 Javascript

jquery.ajax之beforeSend方法使用介绍

2014/12/08 Javascript

轻松创建nodejs服务器（8）：非阻塞是如何实现的

2014/12/18 NodeJs

jQuery实现可以编辑的表格实例详解【附demo源码下载】

2016/07/09 Javascript

探索Vue.js component内容实现

2016/11/03 Javascript

Vue.js常用指令的使用小结

2017/06/23 Javascript

Angular通过angular-cli来搭建web前端项目的方法

2017/07/27 Javascript

通过button将form表单的数据提交到action层的实例

2017/09/08 Javascript

Vue 2.5 Level E 发布了：新功能特性一览

2017/10/24 Javascript

浅谈Redux中间件的实践

2018/07/27 Javascript

vue3 源码解读之 time slicing的使用方法

2019/10/31 Javascript

python Django连接MySQL数据库做增删改查

2013/11/07 Python

Python学习之asyncore模块用法实例教程

2014/09/29 Python

Python3控制路由器——使用requests重启极路由.py

2016/05/11 Python

python list排序的两种方法及实例讲解

2017/03/20 Python

python实现AES加密与解密

2019/03/28 Python

python re.sub()替换正则的匹配内容方法

2019/07/22 Python

Python上下文管理器类和上下文管理器装饰器contextmanager用法实例分析

2019/11/07 Python

使用python 的matplotlib 画轨道实例

2020/01/19 Python

Django-rest-framework中过滤器的定制实例

2020/04/01 Python

PyCharm最新激活码（2020/10/27全网最新）

2020/10/27 Python

Vinatis德国：法国领先的葡萄酒邮购公司

2020/09/07 全球购物

js实现弹框效果

2021/03/24 Javascript

《浅水洼里的小鱼》听课反思

2014/02/28 职场文书

2014年五一活动策划方案

2014/03/15 职场文书

毕业自我鉴定书

2014/03/24 职场文书

党员公开承诺践诺书

2014/03/25 职场文书

仲裁协议书

2014/09/26 职场文书

2014年个人工作总结范文

2014/11/07 职场文书

浅谈MySql update会锁定哪些范围的数据

2022/06/25 MySQL