vue3 动态绑定背景图片方法示例

更新时间：2023年10月31日 08:46:36 作者：HeiYanjing

这篇文章主要为大家介绍了vue3动态绑定背景图片实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

引言

有时候会遇到给img标签或者div设置背景图片的需求，资源文件可能需要经过二次判断来动态绑定。记录一下工作中遇到的坑

img标签src属性函数获取

这种方式可以避开绑定响应式数据响应式

<img
            :src="getSource()"
            alt=""
            class="banner_img"
        />

const getSource = () => {
    return yesOrNo ?
        new URL('../../path1', import.meta.url).href :
        new URL('../../path2', import.meta.url).href
}

sass语法设置背景图片

yesOrNo是响应式数据

.set_bg_img {
    @if #{yesOrNo} {
        background: url('img1');
    }

    @else {
        background: url('img2');
    }

通过style，ref，reactive来绑定实现

backgroundImage格式依然按照规范来实现,这里用ref或者reactive来绑定back_image都可以实现。

<div :style="back_image">

const back_image = ref({
    backgroundImage: yesOrNo ?
        `url(${new URL('path1', import.meta.url).href})` :
        `url(${new URL('path2', import.meta.url).href})`
})

以上就是vue3 动态绑定背景图片的详细内容，更多关于vue3 动态绑定背景图片的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

详解Vue中watch的高级用法
我们通过实例代码给大家分享了Vue中watch的高级用法，对此知识点有需要的朋友可以跟着学习下。
2018-05-05
JavaScript实现简单的图片切换功能(实例代码)
这篇文章主要介绍了JavaScript实现简单的图片切换功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧
2020-04-04
vue中如何实现拖拽调整顺序功能
这篇文章主要介绍了vue中如何实现拖拽调整顺序功能问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-05-05
Vue中原生template标签失效如何解决
这篇文章主要介绍了Vue中原生template标签失效如何解决，找了整一天也没找着这事件为什么触发不了，第二天意识到原生代码里的template可能有问题，在原生环境中template标签内部的东西是不会渲染出来的，虽然解析器在加载页面的时候确实会处理这部分代码片段
2023-02-02
vue在antDesign框架或elementUI框架组件native事件中触发2次问题
这篇文章主要介绍了vue在antDesign框架或elementUI框架组件native事件中触发2次问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
vue3实现H5表单验证组件的示例
本文主要介绍了vue3实现H5表单验证组件的示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-04-04
vue中实现移动端的scroll滚动方法
下面小编就为大家分享一篇vue中实现移动端的scroll滚动方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03
Webpack和Vite的区别小结
本文主要介绍了Webpack和Vite的区别小结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-05-05
vue3和vue2挂载实例到全局(自定义消息提示框组件方式)
这篇文章主要介绍了vue3和vue2挂载实例到全局(自定义消息提示框组件方式),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-04-04
vue实现大文件切片上传的示例详解
前端上传文件很大时,会出现各种问题,比如连接超时了,网断了,都会导致上传失败,这个时候就需要将文件切片上传,下面我们就来学习一下如何使用vue实现大文件切片上传吧
2023-11-11