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 相关文章推荐
Javascript 中介者模式实例
Dec 16 Javascript
javascript中的五种基本数据类型
Aug 26 Javascript
jqGrid中文文档之选项设置
Dec 02 Javascript
详解JavaScript中Hash Map映射结构的实现
May 21 Javascript
JS在onclientclick里如何控制onclick的执行
May 30 Javascript
使用JavaScript实现链表的数据结构的代码
Aug 02 Javascript
WebPack配置vue多页面的技巧
May 15 Javascript
微信小程序实现星级评分和展示
Jul 05 Javascript
Nuxt.js之自动路由原理的实现方法
Nov 21 Javascript
浅谈Javascript中的对象和继承
Apr 19 Javascript
40行代码把Vue3的响应式集成进React做状态管理
May 20 Javascript
vue配置型表格基于el-table拓展之table-plus组件
Apr 12 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
用PHP ob_start()控制浏览器cache、生成html实现代码
2010/02/16 PHP
PHP中ob_start函数的使用说明
2013/11/11 PHP
PHP面向对象编程之深入理解方法重载与方法覆盖(多态)
2015/12/24 PHP
PHP中strncmp()函数比较两个字符串前2个字符是否相等的方法
2016/01/07 PHP
setTimeout 不断吐食CPU的问题分析
2009/04/01 Javascript
jQuery 1.3 和 Validation 验证插件1.5.1
2009/07/09 Javascript
JScript分割字符串示例代码
2013/09/04 Javascript
jquery实现效果比较好的table选中行颜色
2014/03/25 Javascript
JavaScript实现在页面间传值的方法
2015/04/07 Javascript
Bootstrap入门书籍之(三)栅格系统
2016/02/17 Javascript
jQuery 生成svg矢量二维码
2016/08/09 Javascript
jQuery Autocomplete简介_动力节点Java学院整理
2017/07/17 jQuery
详解node.js 下载图片的 2 种方式
2018/03/02 Javascript
JavaScript中字符串的常用操作方法及特殊字符
2018/03/18 Javascript
详解在Vue中使用TypeScript的一些思考(实践)
2018/07/06 Javascript
Vue如何获取数据列表展示
2019/12/11 Javascript
Js视频播放器插件Video.js使用方法详解
2020/02/04 Javascript
Python import用法以及与from...import的区别
2015/05/28 Python
Java中重定向输出流实现用文件记录程序日志
2015/06/12 Python
Python基于list的append和pop方法实现堆栈与队列功能示例
2017/07/24 Python
Django+Ajax+jQuery实现网页动态更新的实例
2018/05/28 Python
python 实现返回一个列表中出现次数最多的元素方法
2019/06/11 Python
Python 绘制酷炫的三维图步骤详解
2019/07/12 Python
pandas通过字典生成dataframe的方法步骤
2019/07/23 Python
为什么python比较流行
2020/06/19 Python
基于Jquery和Css3代码制作可以缩放的搜索框
2015/11/19 HTML / CSS
英国假睫毛购买网站:FalseEyelashes.co.uk
2018/05/23 全球购物
Opodo意大利:欧洲市场上领先的在线旅行社
2019/10/24 全球购物
在线实验室测试:HealthLabs.com
2020/05/03 全球购物
2014两会学习心得:榜样精神伴我行
2014/03/17 职场文书
2014年营业员工作总结
2014/11/18 职场文书
失职检讨书大全
2015/01/26 职场文书
3.15消费者权益日活动总结
2015/02/09 职场文书
利用Python判断整数是否是回文数的3种方法总结
2021/07/07 Python
Java实现带图形界面的聊天程序
2022/06/10 Java/Android
CSS的calc函数用法小结
2022/06/25 HTML / CSS