编程 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 window.onload 加载多个函数的方法

Nov 02 Javascript

基于prototype扩展的JavaScript常用函数库

Nov 30 Javascript

javascript面向对象编程代码

Dec 19 Javascript

innerHTML,outerHTML,innerText,outerText的用法及区别解析

Dec 16 Javascript

JavaScript实现的购物车效果可以运用在好多地方

May 09 Javascript

在JavaScript中使用NaN值的方法

Jun 05 Javascript

node.js路径处理方法以及绝对路径详解

Mar 04 Javascript

JS实现的图片预览插件与用法示例【不上传图片】

Nov 25 Javascript

微信小程序页面传值详解

Mar 10 Javascript

基于webpack4搭建的react项目框架的方法

Jun 30 Javascript

vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】

Aug 29 Javascript

elementUI 动态生成几行几列的方法示例

Jul 11 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中的时间显示

2007/01/18 PHP

并发下常见的加锁及锁的PHP具体实现代码

2010/10/12 PHP

PHP文件操作实例总结

2016/09/27 PHP

Laravel 手动开关 Eloquent 修改器的操作方法

2019/12/30 PHP

20个非常有用的PHP类库加速php开发

2010/01/15 Javascript

windows系统下简单nodejs安装及环境配置

2013/01/08 NodeJs

jquery控制左右箭头滚动图片列表的实例

2013/05/20 Javascript

JavaScript中访问节点对象的方法有哪些如何使用

2013/09/24 Javascript

javascript读取xml实现javascript分页

2013/12/13 Javascript

JavaScript设计模式之外观模式实例

2014/10/10 Javascript

cocos2dx骨骼动画Armature源码剖析(一)

2015/09/08 Javascript

Jquery 1.9.1源码分析系列（十二）之筛选操作

2015/12/02 Javascript

基于vue.js实现图片轮播效果

2016/12/01 Javascript

node中koa中间件机制详解

2017/08/22 Javascript

javascript算法之二叉搜索树的示例代码

2017/09/12 Javascript

JS随机排序数组实现方法分析

2017/10/11 Javascript

利用babel将es6语法转es5的简单示例

2017/12/01 Javascript

js动态添加表格逐行添加、删除、遍历取值的实例代码

2018/01/25 Javascript

JavaScript中的回调函数实例讲解

2019/01/27 Javascript

JavaScript如何获取一个元素的样式信息

2019/07/29 Javascript

Python实现随机选择元素功能

2017/09/14 Python

Python代码实现KNN算法

2017/12/20 Python

Python实现识别手写数字大纲

2018/01/29 Python

Python中传递值和传递引用的区别解析

2018/02/22 Python

Python实现处理逆波兰表达式示例

2018/07/30 Python

Python秒算24点实现及原理详解

2019/07/29 Python

利用Pytorch实现简单的线性回归算法

2020/01/15 Python

jupyter notebook中新建cell的方法与快捷键操作

2020/04/22 Python

Python3 + Appium + 安卓模拟器实现APP自动化测试并生成测试报告

2021/01/27 Python

英国泽西岛植物：Jersey Plants Direct

2019/08/07 全球购物

波兰在线运动商店：YesSport

2020/07/23 全球购物

沙特阿拉伯家用电器和电子产品购物网站：Sheta and Saif

2020/04/03 全球购物

初中语文教学反思

2014/02/02 职场文书

大学生活动总结模板

2014/07/02 职场文书

2015元旦晚会主持词（开场白+结束语）

2014/12/14 职场文书

经典格言警句：没有热忱，世间便无进步

2019/11/13 职场文书