编程 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 相关文章推荐

用JavaScript调用WebService的示例

Apr 07 Javascript

juqery 学习之四筛选过滤

Nov 30 Javascript

jquery ajax学习笔记2 使用XMLHttpRequest对象的responseXML

Oct 16 Javascript

JS 弹出层定位至屏幕居中示例

May 21 Javascript

JavaScript父子窗体间的调用方法

Mar 31 Javascript

Angularjs实现mvvm式的选项卡示例代码

Sep 08 Javascript

微信小程序实现滚动消息通知

Feb 02 Javascript

vue-自定义组件传值的实例讲解

Sep 18 Javascript

微信小程序模板template简单用法示例

Dec 04 Javascript

Cocos2d实现刮刮卡效果

Dec 20 Javascript

微信小程序系列之自定义顶部导航功能

May 21 Javascript

vue在响应头response中获取自定义headers操作

Jul 24 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和ACCESS写聊天室(十)

2006/10/09 PHP

PHP中for循环语句的几种变型

2007/03/16 PHP

Apache PHP MySql安装配置图文教程

2016/08/27 PHP

php 无限分类树形数据格式化代码

2016/10/11 PHP

一文掌握PHP Xdebug 本地与远程调试(小结)

2019/04/23 PHP

Laravel 修改验证异常的响应格式实例代码详解

2020/05/25 PHP

WEB页子窗口(showModalDialog和showModelessDialog)使用说明

2009/10/25 Javascript

JavaScript下通过的XMLHttpRequest发送请求的代码

2011/06/28 Javascript

通过正则表达式获取url中参数的简单实现

2016/06/07 Javascript

jquery自动补齐功能插件flexselect用法示例

2016/08/06 Javascript

Node.js中的require.resolve方法使用简介

2017/04/23 Javascript

详解Node.js 命令行程序开发教程

2017/06/07 Javascript

p5.js入门教程和基本形状绘制

2018/03/15 Javascript

TypeScript基础入门教程之三重斜线指令详解

2018/10/22 Javascript

使用Vue中 v-for循环列表控制按钮隐藏显示功能

2019/04/23 Javascript

webpack-mvc 传统多页面组件化开发详解

2019/05/07 Javascript

前后端常见的几种鉴权方式(小结)

2019/08/04 Javascript

javaScript中indexOf用法技巧

2019/11/26 Javascript

python 排序算法总结及实例详解

2016/09/28 Python

请不要重复犯我在学习Python和Linux系统上的错误

2016/12/12 Python

Python操作csv文件实例详解

2017/07/31 Python

python爬虫实战之最简单的网页爬虫教程

2017/08/13 Python

利用Python进行异常值分析实例代码

2017/12/07 Python

python中int与str互转方法

2018/07/02 Python

用python求一个数组的和与平均值的实现方法

2019/06/29 Python

python清空命令行方式

2020/01/13 Python

关于Keras Dense层整理

2020/05/21 Python

德国隐形眼镜店：LuckyLens

2018/07/29 全球购物

95%的面试官都会问到的50道Java线程题，附答案

2012/08/03 面试题

学校安全责任书

2014/04/14 职场文书

文明家庭事迹材料

2014/12/20 职场文书

劳资员岗位职责

2015/02/13 职场文书

2015年工程部工作总结

2015/04/30 职场文书

2015年迎新晚会策划书

2015/07/16 职场文书

资产移交协议书

2016/03/24 职场文书

python使用matplotlib绘制图片时x轴的刻度处理

2021/08/30 Python