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

 更新时间:2018年08月10日 11:01:09   投稿:mrr   我要评论

这篇文章主要介绍了vue 动态绑定背景图片的方法,在文末给大家介绍了vue如何给v-for循环的标签添加背景图片,需要的朋友参考下吧

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-cli项目中怎么使用mock数据

    vue-cli项目中怎么使用mock数据

    本篇文章主要介绍了vue-cli项目中怎么使用mock数据 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • 在Vue中使用echarts的方法

    在Vue中使用echarts的方法

    这篇文章主要介绍了Vue中使用echarts的方法,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2018-02-02
  • vue+iview写个弹框的示例代码

    vue+iview写个弹框的示例代码

    本篇文章主要介绍了vue+iview写个弹框的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • vue学习之mintui picker选择器实现省市二级联动示例

    vue学习之mintui picker选择器实现省市二级联动示例

    本篇文章主要介绍了vue学习之mintui picker选择器实现省市二级联动示例,非常具有实用价值,需要的朋友可以参考下
    2017-10-10
  • Vue.js结合Ueditor富文本编辑器的实例代码

    Vue.js结合Ueditor富文本编辑器的实例代码

    本篇文章主要介绍了Vue.js结合Ueditor的项目实例代码,这里整理了详细的代码,具有一定的参考价值,有兴趣的可以了解一下
    2017-07-07
  • 在vue中使用jointjs的方法

    在vue中使用jointjs的方法

    本篇文章主要介绍了在vue中使用jointjs的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • Vue完整项目构建(进阶篇)

    Vue完整项目构建(进阶篇)

    这篇文章主要介绍了Vue完整项目构建(进阶篇)的相关资料,需要的朋友可以参考下
    2018-02-02
  • 详解Nuxt.js Vue服务端渲染摸索

    详解Nuxt.js Vue服务端渲染摸索

    本篇文章主要介绍了详解Nuxt.js Vue服务端渲染摸索,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-02-02
  • 详解vue-cli项目中的proxyTable跨域问题小结

    详解vue-cli项目中的proxyTable跨域问题小结

    这篇文章主要介绍了详解vue-cli项目中的proxyTable跨域问题小结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-02-02
  • Vue-Router2.X多种路由实现方式总结

    Vue-Router2.X多种路由实现方式总结

    下面小编就为大家分享一篇Vue-Router2.X多种路由实现方式总结,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02

最新评论